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" />

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>

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:

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;
}

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;
}

Our navigation bar would look like this:

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;
    }

}

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:

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")
});

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

Final result:

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.