DEV Community

loading...
Cover image for Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

devggaurav profile image Gaurav ・4 min read

Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.

This is how it will look,

Alt Text

Github link :

So let's start with the HTML,

<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>

Enter fullscreen mode Exit fullscreen mode

Here, we have

  • header with the class of header which work as a container of our navbar
  • nav with the class of navbar
  • a link with the class of nav-logo
  • ul with the class of nav-menu
  • inside the ul we have 4 lis with the class of nav-item
  • inside each nav-item we have a link with the class of nav-link
  • for our hamburger I have added a div with the class of hamburger and inside which we have 3 spans with the class of bar

So this is the HTML that we need.

Now let's add the CSS reset

(Here we will import the font we need and add some basic CSS to reset all the default styles.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

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

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

Enter fullscreen mode Exit fullscreen mode

Now let's add styles to the elements one by one,

  • header and navbar
.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode
  • hamburger styles
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}
Enter fullscreen mode Exit fullscreen mode
  • basic styles for our other elements
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link:hover{
    color: #482ff7;
}

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}

Enter fullscreen mode Exit fullscreen mode

After this, It should look like this,

Alt Text

But It's not responsive yet, so let's add the media queries.

@media only screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 2.5rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

}

Enter fullscreen mode Exit fullscreen mode

What this media query does is, hides our nav-menu by setting position: fixed; left: -100%; on it.
Also, we set our hamburger to display: block; so it's visible now.
We have also added an extra class that is .nav-menu.active which sets left: 0; on the nav-menu. Now we will have to add the javascript which will add this active class on the nav-menu when we click our hamburger.

Let's add the javascript.

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

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}
Enter fullscreen mode Exit fullscreen mode

Here the function mobileMenu() also adds an active class on our hamburger and our nav-menu which makes our mobile menu open. we can use the active class on the hamburger to create that X animation when we click on the hamburger. so let's do that now.

// Inside the Media Query.

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

Enter fullscreen mode Exit fullscreen mode

It should look like this now,

Alt Text

But there is a catch, the hamburger menu doesn't close when we click a link. So let's add that now,

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}
Enter fullscreen mode Exit fullscreen mode

The closeMenu() function removes the active class from both the nav-menu and the hamburger which makes our mobile menu close.

Alt Text

So that's it guys we built a responsive navbar and hamburger menu with HTML CSS and javascript. Hope u liked it. Share this article. Thank you 😀

Discussion (45)

pic
Editor guide
Collapse
angeliquejw profile image
Angelique

This is a great start, but does not resolve anything about the accessibility of this menu. Two immediate things to fix would be to make the hamburger menu itself a button element (which would make it clear that it's interactive) and to add some text that labels the button in some way (which would make it meaningful to a screen reader user). 👍🏻

See these examples for more detail and other fixes:

Collapse
devggaurav profile image
Gaurav Author

Thank u so much for the feedback and suggestions! Appreciate it. And i will surely fix it and implement your suggestions 😊

Collapse
nicozerpa profile image
Nico Zerpa (he/him)

Thank you for sharing!
There's a way to do it without using JavaScript, handling the menu visibility with CSS.

If you add a <div> containing only the hamburger button and the menu, you can use the :focus-within CSS pseudo-selector. :focus-within applies to an element if it has the focus, but also if one of its children is focused.

For example, if you write the HTML for the menu like this:

<div class="menu-container">
  <button type="button" class="hamburger">Menu</button>
  <nav class="navbar">...</nav>
</div>
Enter fullscreen mode Exit fullscreen mode

You can use the :focus-within selector like this:

.menu-container .navbar {
  display: none;
}
.menu-container:focus-within .navbar {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

Now, the <nav class="navbar"> will initially remain hidden, but it will appear when any child of <div class="menu-container"> is focused. For example, when you click on the hamburger button or some of the menu items.

Collapse
devggaurav profile image
Gaurav Author

Hey thank u so much for sharing this man! Will try this

Collapse
clabnet profile image
Claudio Barca

Nice, thanks.

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
kritikaramesh profile image
kritikaramesh

Great explanation was helpful ! 👍🏽

Collapse
devggaurav profile image
Gaurav Author

Thank u !

Collapse
eke profile image
Eke Victor

Wow. I like this. Steps are so simple. I forked this on GitHub. Thanks for sharing.

Collapse
theoluwafemi profile image
TheOluwafemi

Awesome article. 👏

Collapse
dn_josh profile image
Dumte

I so much love how things are sectionized for easy understanding.

Collapse
westerndad profile image
westerndad

Thanks 😊 for the Tut..... It's simple and Amazing

Collapse
devggaurav profile image
Gaurav Author

Thank u!❤

Collapse
chloet profile image
Chloe Tompson

Thanks a lot for this tut, searching like that :-)

Collapse
kleguizamon profile image
Kevin Leguizamon

Great tutorial!!

Collapse
devggaurav profile image
Gaurav Author

Thank u 😊

Collapse
mahmoudhamed97 profile image
Mahmoud Hamed

Awesome! 👏✌️

Collapse
devggaurav profile image
Gaurav Author

Thank u !

Collapse
jwenjian profile image
Collapse
marlonmalheiros profile image
marlon-malheiros

Nice tutorial! The way you divided, make very simple to understand and follow :)

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
imprimph profile image
Jaswanth

Loved it!

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
theflorz profile image
Florence O.

It was so easy to understand. Thank you for this. Bookmarked 😁

Collapse
devggaurav profile image
Gaurav Author

Thank u so much!

Collapse
kchemutai profile image
Chemutai Kevin

Very Nice. Thanks

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
nokha_debbarma profile image
Nokha Debbarma

wow! Thanks a lot for sharing. I have practiced the same by going through this post. Well structured and few lines of codes.

Collapse
devggaurav profile image
Gaurav Author

Thank you so much!❤

Collapse
brandonwallace profile image
brandon_wallace

Yes, this is a very nice tutorial. Thank you for posting it.

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
corem96 profile image
Jorge Escamilla

Amazingly simple, Thanks

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
nguyentran6698 profile image
nguyentran6698

Thank you sharing. This is what I'm looking for

Collapse
devggaurav profile image
Gaurav Author

Thank u!❤

Collapse
hamdanidev profile image
Collapse
devggaurav profile image
Collapse
aayansh profile image
Aayansh549

How can I make it close on clicking Outside of Navbar.

Collapse
gayatriarora profile image
GayatriArora

This is great, broken down to each step so its easy to understand. Thank you! 🤓

Collapse
zalikzero profile image
ZalikZero

Thank you for the article! Whenever I have a tech issue I contact my IT partner. They helped me with updating my site to newer technology ​itmaster-soft.com/en/backend-devel...

Collapse
huylong profile image
huylong

Nice !!!

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
coder618 profile image
Ahadul Islam

You guys work too hard ! 🤣

Collapse
petermyname profile image
Petermyname

thank you so much. You made it easy

Collapse
devggaurav profile image
Gaurav Author

Thank u for the feedback man!