DEV Community

Cover image for How to create a simple mobile responsive navigation bar with HTML, CSS and JavaScript
Umar Yusuf
Umar Yusuf

Posted on

How to create a simple mobile responsive navigation bar with HTML, CSS and JavaScript

Navigation bars are essential components used a lot in websites and web apps. As a software developer, you will need to be able to create and customize them, either for yourself or for a client project.

In this article, you'll learn how to create a simple mobile responsive navigation bar with HTML, CSS, and JavaScript. This article assumes that you have basic knowledge of HTML, CSS, and JavaScript.

Let's get right into it.

Step 1 - Add HTML Markup

Before adding the HTML markup for our navigation bar, let's import a hamburger icon from Google icons. we'll be using the hamburger icon to toggle the navigation menu in small screens.

To import and use the hamburger icon from google, add the snippet below in the head of your HTML file:



<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />


Enter fullscreen mode Exit fullscreen mode

Next, add the markup below to your HTML file. I will explain it later.



<header class="header">
        <div class="nav-container">
            <span class="logo">NavBar</span>
            <nav class="nav">
                <ul class="nav--ul__one">
                    <li class="nav-link"><a href="#">Home</a></li>
                    <li class="nav-link"><a href="#">Contact</a></li>
                    <li class="nav-link"><a href="#">About Us</a></li>
                </ul>
                <ul class="nav--ul__two">
                    <li class="nav-link"><a href="#">Login</a></li>
                    <li class="nav-link"><a href="#">Signup</a></li>
                </ul>
            </nav>
            <span class="hamburger-menu  material-symbols-outlined">menu</span>
        </div>
</header>


Enter fullscreen mode Exit fullscreen mode

The HTML markup consists of the following:

  1. A <header> element with the class of header that wraps the all the elements.
  2. Inside the header, you have a container div with the class nav-container. This div wraps the logo, navigation links, and the hamburger menu.
  3. A <span> element with the class logo.
  4. A <nav> element with the class nav as the main navigation container. This container holds the navigation links and hamburger menu icon.
  5. Inside the <nav>, you have two list of navigation links each represented with a <ul> with the class of nav--ul__one and nav--ul__two respectively.
  6. You have another <span> element with the class hamburger-menu and an icon class material-symbols-outlined which represents the hamburger menu icon.

Here is the result:

markup result

With that done, now let's add some styles to make our navigation bar visually appealing.

Step 2 - Style the Navigation Bar

We'll start by resetting the default padding and margin of every element of the page, and add some basic styling to a few elements.



* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}


Enter fullscreen mode Exit fullscreen mode

Now that we are done with some basic styling, let's focus on styling the core navigation bar itself.

Navigation Menu Styles

Here is the markup to style the navigation:



header {
    background: #4D4DDB;
    color: white;

    padding: .5rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 90%;
    margin: 0 auto;
}


.nav-container .logo {
    font-size: 2rem; 
    font-weight: bold;  
}

.nav {
    display: flex;
    flex-grow: 1;
}

.nav--ul__one {
    margin: 0 auto;
}

.nav-container, .nav--ul__one,
.nav--ul__two {
    display: flex;
    gap: 1.6rem;
    font-size: 1.2rem;
}

.hamburger-menu {
    display: none; /* Hidden by default for larger screens */
    cursor: pointer;
}



Enter fullscreen mode Exit fullscreen mode

Our navigation bar would look like this:

navigation bar styles

Next, let's add some media query to make our navigation bar mobile responsive.



@media (max-width: 700px) {
    .nav-container .logo {
        font-size: 1.2rem;
        z-index: 2;
    }

    .nav {
        flex-direction: column;
        gap: 2rem;
    }

    .nav--ul__one,
    .nav--ul__two {
        flex-direction: column;
        gap: .6rem;
    }

    .hamburger-menu {
        display: block;

        z-index: 2;
    }

    .nav {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;

        padding-top: 6rem;

        align-items: center;
        text-align: center;
        background-color: #4D4DDB;
        color: white;

        transition: 0.15s ease-in-out;
    }

    .nav.active {
        right: 0;
    }

}


Enter fullscreen mode Exit fullscreen mode

First, this arranges the elements on small screens, and most importantly, making the nav slide in from the right when active but of course, it is not functional. we'll do that next.

Here is the result so far:

navigation bar responsiveness on small screens

Now, let's work on the functionality in the next section.

Step 3 - Add JavaScript Functionality

Here are the steps we'll use to add javascript functionality to the navigation bar:

  1. Get references to the hamburger-menu and nav
  2. Add a click event listener to the hamburger-menu
  3. Toggle the active class on the nav to show/hide it


const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active")
});


Enter fullscreen mode Exit fullscreen mode

When the hamburger-menu is clicked, it toggles the visibility of the menu by adding or removing the active class.

Final result:
Navigation bar mobile view

And with this, you’ve successfully built a mobile responsive navigation bar using just HTML, CSS, and JavaScript.

Conclusion

I sincerely hope you found this post interesting or useful. If you did, kindly react to it and share with your friends or follow my account so you won't miss any future postings. Thanks for reading.

Top comments (0)