DEV Community

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.

Gaurav on March 13, 2021

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 w...
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

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
 
guin profile image
Angelika Jarosz

This is a cool solution i just tried out in my own code! Thanks for sharing! The only downside is once the menu is open, you have to click outside the hamburger to close it which from a user experience perspective could confuse a user for a second/ make them think your site has a bug. Unless you also have a work around to this that i am missing.

Collapse
 
theodor_sirmanoff_090deae profile image
Theodor Sirmanoff • Edited

why not this about leaving it go home :) :
=== CSS ===
.show {

display: block; /* Show navbar when class 'show' is added */

}

=== JS ===
you toggle it first with showNavbar(), then :

function hideNavbar() {

const navbar = document.getElementById('navbar');

navbar.classList.remove('show');

}
const navbar = document.getElementById('navbar');

navbar.addEventListener('mouseleave', hideNavbar);

Collapse
 
devggaurav profile image
Gaurav

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

Collapse
 
ryanstotler profile image
RyanStotler

This works great in codepen, I am trying to get the js to work and I am getting:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at site.js:165
from:
hamburger.addEventListener("click", mobileMenu);
Do you know how to resolve this property null in the javascript file?
Appreciate your help in advance

Collapse
 
iancahn profile image
Ian Cahn

Hey Ryan, I had this exact same issue, so Im gonna go ahead and guess you are using Chrome. Chrome has issues when using JS in localhost environment. To fix this, just move your js script tag to your footer, instead of your header. This fixed it for me, strange but hey...

Collapse
 
srichmond3000 profile image
Steve Richmond

Another solution is to add the 'defer' attribute to the script element.

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Great explanation! Helped a lot!

Collapse
 
clabnet profile image
Claudio Barca

Nice, thanks.

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
kiruanime2003 profile image
Kiruthiga K • Edited

It was really helpful. The javascript code was easy to understand. As a beginner in javascript, I was really able to understand it without any help. I was even able to tweak it and modify it according to my wish.

Collapse
 
kritikaramesh profile image
kritikaramesh

Great explanation was helpful ! 👍🏽

Collapse
 
devggaurav profile image
Gaurav

Thank u !

Collapse
 
hamdanidev profile image
Asep hamdani

nice

Collapse
 
devggaurav profile image
Gaurav

Thanks.

Collapse
 
theflorz profile image
Florence O.

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

Collapse
 
devggaurav profile image
Gaurav

Thank u so much!

Collapse
 
jahidulsaeid profile image
Jahidul Islam (Saeid)

Here is the react version of this template:

codesandbox.io/s/epic-meninsky-n5zlbj

Collapse
 
nehal076 profile image
Nehal Jaisalmeria

Thank you so much. I was just stuck with react implementation. Your solution worked like a charm! Thanks for posting it here. 🙌🏻

Collapse
 
marlonmalheiros profile image
marlon-malheiros

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

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
srichmond3000 profile image
Steve Richmond

Thanks Gaurav. Great explanations.

Collapse
 
regex777 profile image
regex

Thanks a lot u saved my day :DD

Collapse
 
husky profile image
geronimostar

@gaurav This doesn't work.

Collapse
 
miguelznunez profile image
Miguel Z. Nunez

Fuck yeah

Collapse
 
aayansh profile image
Aayansh549

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

Collapse
 
victoreke profile image
Victor Eke

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

Collapse
 
theoluwafemi profile image
TheOluwafemi

Awesome article. 👏

Collapse
 
dnjosh10 profile image
Dumte Nwidoobee Joshua

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

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

Thank u 😊

Collapse
 
mahmoudhamed97 profile image
Mahmoud Hamed

Awesome! 👏✌️

Collapse
 
devggaurav profile image
Gaurav

Thank u !

Collapse
 
1link profile image
1Link.Fun

Wow!

Collapse
 
imprimph profile image
Jaswanth

Loved it!

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
kchemutai profile image
Chemutai Kevin

Very Nice. Thanks

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
brandonwallace profile image
brandon_wallace

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

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
corem96 profile image
Jorge Escamilla

Amazingly simple, Thanks

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
nguyentran6698 profile image
nguyentran6698

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

Collapse
 
devggaurav profile image
Gaurav

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

Thank you so much!❤

Collapse
 
petermyname profile image
Petermyname

thank you so much. You made it easy

Collapse
 
devggaurav profile image
Gaurav

Thank u for the feedback man!

Collapse
 
gayatriarora profile image
GayatriArora

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

Collapse
 
drumer130 profile image
Drumer130

simply perfect! just what i was looking for/thanks sir.

Collapse
 
huylong profile image
huylong

Nice !!!

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
hugomndez profile image
Hugo Méndez

Would be great to change this code to mobile first instead.

Collapse
 
husky profile image
geronimostar

I use replit, and I followed all the steps. (I have hacker plan)

Collapse
 
coder618 profile image
Ahadul Islam

You guys work too hard ! 🤣

Collapse
 
oliviamynahan profile image
oliviamynahan

The drop down menu isn't working for me for some reason. I am clicking the button, but it is not displaying anything. Does anyone know how to fix this?

Collapse
 
aseppppp profile image
aseppp

Thanks bro, great tutorial, easy to understand and help me a lot

Collapse
 
judyme2x profile image
Judith M

Super nav bar! How did you calculate the translateY pixels you have to move in order to form a X? Thanks a lot!

Collapse
 
jeplya-13 profile image
Ayda M

Thank you, thank you, thank you! I have tried many hamburger menus. It is so frustrating for beginners.
Worked perfectly!!!

Collapse
 
mcvindi profile image
McVindi

I do find this helpful, I have spent sleepless nights for weeks trying to do this on my own, thank you very much, and also thanks to the community as well.

Collapse
 
dylan_cross_de50c3ca7fcad profile image
Dylan Cross

This was a great tutorial! Thanks for sharing :-)