How to Create a Responsive Hamburger Menu (Fixed Version) - HTML, CSS & JavaScript

In this tutorial, you'll learn how to create a responsive fixed hamburger menu using HTML, CSS and JavaScript. This is also known as sticky menu.

Sponsor me on GitHub!

Follow my blog:

[najeesimmons]

This was outrageously helpful. Hamburger menus have eluded me for a while now, but with your help, I'm finally able to implement them. Many thanks 🙏

[Sloarot]

Great tutorial thanks! If people have problems when the hamburger or the mobile menu doesn't appear: check if you added a space between .nav-menu/.hamburger and the .active part. I added a space and it didn't work. Remove the space and it does work. In other words .nav-menu and .hamburger should immediately be followed by .active!!!

[benzzzxlv]

Im so grateful for this video thank you so much

[mefesto_]

Use button tag for hamburger. Why div? It have no semantic, no any roles. Button tag was created for this case.

[An-yhbl]

It was a really good tutorial, easy to understand and easy to follow. :) Thanks a lot!

[kasunkumarasinghe]

thank you very much for teaching this so easy.

[muhammadjumani]

Its Working but its not closing when i click on hamburger button kindly help me out!

[BogdanTancic]

I have an issue. Javascripts adds the class to the elements, but the list doesnt show up. Any help?

[JesseMoto]

very nice, what about a multi level nav?

[mariamgamal]

i did the same but it doesnt seem to hear any event listeners for a click on <a></a>

[SALVFX]

Amazing, but If I want the responsive menu to move from top to down instead of left to right, what parameters I have to change on the code? thanks in advance :D