JavaScript - How to Create a Responsive Hamburger Menu with HTML, CSS, & JavaScript

In this tutorial, you'll learn how to create a responsive hamburger menu using HTML, CSS and JavaScript.
Sponsor me on GitHub!
github.com/spo...
Follow my blog:
/ miguelznunez
Email : [e-mail]
Medium : / miguelznunez
Codepen : codepen.io/mig...
GitHub : github.com/mig...

[@mary-hu3ff]

One of the best tutorials I have seen up until now in JS for a simple dynamic! Even tho it's a simple topic, some people over complicate their tutorials so much, thank you!!!

[@teenytinytoons]

Literally the best hamburger tutorial out there hands down. Took me forever to find one where I could understand. Bravo!!

[@tmm476]

stfu its not

[@naidenlambev4929]

Hello and thank you ! This has helped me a lot. By far the cleanest tutorial and the best explanation. Thank you for giving us such a powerful content. Cant wait to see more from you !

[@edwardwilson4272]

I agree, I've looked at a few others and this is the best one so far. Really useful JS concepts in here too. Thanks Codefoxx!

[@evelyntelevision]

Thanks for this! I searched all over for a simple, straightforward tutorial on making a collapsing navbar/hamburger menu like this, and yours is the best! I appreciate you getting straight to the point.

[@jessicalopez6121]

😅😅😅😅😅😅😅

[@jamesdeske4327]

Of the 1 million Menu tutorials I have seen this is the BEST

[@codefoxx]

🙂

[@vendettamalize7209]

Thanks you saved my life from hamburger hell, from now on you're my master you have my subscription.

[@urosmalic7818]

This with hamburger and adding spans blew my mind till now i was just adding font awesome icons, this sure teaches u that you can do awesome things with only basics

[@T25de]

very true

[@BryantCobarrubias]

Great demo. I adapted this for my react site. Adding comment to boost your YT algorithm. :)

[@codefoxx]

Awesome and than you

[@T25de]

boost boost

[@ashwinsaxena4734]

The best video to make a responsive nav bar. Thanks for the video!

[@adam3720]

In case anyone encounters an error with the JavaScript code not working, remove the script tag inside the tag and add it inside the body right before the tag. That way, the javascript code will be executed after the HTML Document has fully loaded. Your welcome!

[@baazigar5]

Just use "defer"

[@inakristinethoresen1003]

Yup, that fixed my problem! Thank you!

[@trillionairemania7750]

hey bro in my case its not working . can u help me with that

[@trillionairemania7750]

@@baazigar5 hey bro in my case its not working . can u help me with that

[@baazigar5]

@@trillionairemania7750check your js file name

[@berndberndo9581]

My Hamburger Menu isn‘t working can anyone help me ?

[@JhonnyBueno]

My guy, you helped me a lot in javascript, I had a problem with my Responsive Menu, I thank you immensely, because I solved my case, congratulations for the video.

[@henriquepinheiroxavier]

Thank you very much. Your video was the only one that I understood. I spent my entire weekend trying to learn this menu burger and could not understand it. Your video taught me!

[@codefoxx]

Anytime, im glad i could help

[@rulleywanjau6498]

Thanks these has been a very educative tutorial,has helped me as a student doing computer science ,simple brief and direct to the point

[@HikerMike28]

So the hamburger menu button isn't even displaying for 😅😩 any ideas on what to do it's driving me crazy

[@viveLaCifte]

This was an amazing tutorial, thank you.

[@Coco-ii2pu]

Thank you sooo much. Been troubling myself with bootstrap all this while when I could have just made mine. This tutorial helped a lot ❤️

[@JC-hb2ob]

Thank you very much for this tutorial. I am a beginner and it was really well explained which makes it easier to understand.

[@kunoichikun]

thankyou! was able to incorporate into my existing code easy and now everything looks so much cleaner to what i was doing before!

[@codefoxx]

No problem, I got you

[@superrnaah]

was trying to figure out the js to close the hamburger on link click and found it in this video. Thank you!

[@giulia6930]

Thank you, clear and step by step explanation. I was looking for this!❤❤

[@jmid6358]

hi, great tutorial, nicely explain. but I've got a little problem. nothing happens when I click the burger button. I checked the code and everything seems to be right. it just doesn't do anything. any advice?

[@vojtechsapousek1349]

same

[@alkanpone]

Hi, open your website in Chrome and press F12, there you can see logs. If the button doesn't respont i rec you look at the Action Listener part. Hope it helps :)

[@xt0ferx]

that was happening to me, I moved the javascript call to the end of my html file and it worked fine after that

[@favourewulo5358]

@@alkanpone what should i do to that part

[@gamechangers6946]

Same issue with me

[@tomcox8801]

This was a great tutorial. I was looking for a simple way to add a hamburger menu and this was perfect. Nice and simple and clean. Thank you.

[@codefoxx]

Absolutely

[@yankeesfan3961]

If you don't know Java Script at all then you are in trouble, but it's very good to a point.

[@UrCristiano-x8v]

The best js tutorial that i have ever seen, thanks bro.

[@mahdigholami3916]

Greet tutorial, simple and clear.. many thanks for what you are doing man!

[@codefoxx]

I appreciate it 🙏

[@ravitejadarla3882]

I ever seen this kind of clean explation video you made my day, but only thing we need to look into it when we have menu-links than we unable to scroll up & down I request you to check that please make a video on huge menu navigation bar sir....

[@KozenDGray]

Yo man great tutorial, best one i've found so far.

[@leroymokobi2928]

Very simple, clear and straight forward. Yhanks a lot

[@oppai.dragon]

Dude all done but in mobile menu i found the transparency.....my hamburger menu is transparent even though i have set background but the down home section items overshadowed it

[@jagannathps]

If i saw this video earlier it could have saved a lot of time

[@enssahfayiamomoh8410]

This video is very insightful... thank you a lot...I have learned so much from the video

[@nnejiben]

This video is awesome and so helpful! Little wonder it came tops in my search result.

[@bd-webtutor]

Thank you very much. I was struggling to make my navbar responsive, your video has helped me a lot. It was very easy to follow.

[@trevormadden4301]

Cheers man. Nicely put

[@edbarr1379]

With the JS file I had to change nav-Menu class to navMenu for the mobile menu to work, and for the class .navbar, use justify-content: space-around, worked best for me to avoid adding padding. Overall great Vid, helped me to get my boiler plate with nav included, now I just change the CSS variables to modify the colors.

[@spicydoge3847]

Great video. With some modifications to the code you presented in the video I was able to make a responsive dropdown style menu.

[@andersrammbraten5708]

what kind of modifications, if you would like to share? mine's not working

[@francescaivonnetipianiolor7988]

mine's not working too :( @@andersrammbraten5708

[@elvirakopstala6519]

Thank you! This was super helpful.

[@LightJackKirin]

Splendid video!! Kudos to you mahn. 😮😅

[@RL-rt6up]

great, thank you very much! slim and concise explained without any bells and whistles. however, it only worked for me when I prepended addEventListener with the argument DOMContentLoaded. before that it didn't recognize hamburger. i am very happy to have my own "plugin" for my websites now.

[@wawananggana5129]

Simple and straight tutorial.. thank you..

[@SeleDreams]

I recommend to not use pixel units, it's better to rely on em and rem

[@codefoxx]

Ok

[@NiceChange]

Thus is some great resources. Great work!!!!

[@Firzj]

thank you for the JS hamburger code (to close it when clicking links) I'm total noob but i finally made my hamburger menu work as intended 👍👍👍

[@fannienatourz]

Thank you so much for this tutorial! This was a life saver. Trust me!😅

[@ПетрРусских-м3ь]

Спасибо, все получилось лайк

[@kzhang3835]

Thank you so much. This really works. 👍

[@muhammadakram1701]

The best tutorial

[@JurgenGeitner-s3r]

Thank you so much for a brilliant tutorial!

[@3reinaldo]

Easy, and clean, thanks its a great tutorial

[@spiritualforce]

Damn! You made this look a cake wake for us. New subscriber bro!!

[@rakibhasan9401]

Thanks man! I appreciate your all the efforts buddy! you cracked complicated matters in the simplest way. #respect

[@prashantmishra5691]

Great stuff. Subbed!

[@Larsson037]

i get the x animation when pressin it but the menu wont show up, help please.

[@jakob6123]

Solid tutorial

[@vagabondideas9685]

Excellent! Thank-you

[@_heyise]

This is very helpful. Thank you for this!!

[@vurra]

great video. everthing worked out fine except for one problem. when i have my menu collapses and i click on the hamburger menu to open it, it only shows the home link and not all the other links

[@ff0x]

Thankyou so much for this. You've earned another subscriber - great video :)

[@Salio_Mendes]

Man thank you so much. this has really helped me. ❤

[@thehiddenjonin125]

I thought I would try coding out but after spending hours watching rewatching and reading all the comments and it still doesn't work idk if I can do this. The navigation bar doesn't come up hamburger doesn't work

[@uchiha6622]

Any solution

[@xanny3690]

Good tutorial man 🖤

[@vikisneakers]

What a wholesome tutorial, everything worked smoothly sir

[@Justhue]

Thank you this is so helpful

[@Bigkcee]

Thanks for the video it really was helpful

[@МарияВоробьева-ш9к]

Hi, thank you very much! This video really helped me!!!!

[@codefoxx]

I got you

[@anuragkumarverma]

can't run its shows error "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"

[@theshelbypalace]

this is great video! thank you sooooo much!

[@mcpeko]

Great stuff. Subscribed. 🍻

[@hajarahmed304]

thank you so much! this helped a lot

[@microhandsltd]

A great video, I thank you. I'm studying IT at University and this has inspired me to go that extra bit.

[@PrinceSharma-gq5is]

Very Useful

[@milanmegens4681]

Great tutorial!. However, If i add new li's for more options my burger menu disappears. Could you help me?

[@aminul.islam.]

amazing. thank you

[@Aalii6]

very helpful, thank you!

[@azizrahman3225]

Very simple other devloppers made this very complicated.

[@GabbyBrucebru]

Thanks for your tutorial it help me

[@psykhout]

Hi my hamburger icon disappears when viewing on mobile device. Please help

[@Yunhaisongtao]

Hey I got into a problem, after i did the @media breakpoint, the whole navbar won’t show up when page is wider than the breakpoint, what could I do wrong? After the breakpoint, the hamburger appears and everything works like a charm. Thank you!

[@CjuianDesigns-wo1oz]

This worked letter for letter all the way until I got to the media quary to create the drop down .nav-menu. Then the whole hamburger just disappears. I'm so frustrated. I have tried 7 or 8 nav but the same issue keeps happening. I think it's Dreamweaver because it's so glitchy. any workarounds.

[@FenaxPvt]

at the normal resolution(desktop) i cant see the links there hamburger having them but normal screen with higher resolution haven't ANY SOLUTION PLEASEEE

[@ИванВалдаев]

Наш герой

[@Ali-sb5wj]

hi, when i write "" in my html file, hamburger menu is broken why??? 😥

[@jeanbaptistedaryl1307]

if i could relike your post i would man awesome tuto

[@adrianCoding]

Thanks good tutorial

[@JimKernix]

Excellent!

[@bLitzKinG20]

Thanks bro! Liked & Subbed.

[@NashiEXC]

Hi, quick question, how would you make it move in from the right instead of left? i tried changing the Left:0; in the css to Right:0; and it just doesn't show up

[@myclassroom1649]

Thanks you so much you made my day

[@farukweb]

excellent tutorial.

[@ChromaticaCitizen]

Bro this was so simple and every one of my Professors made it so difficult to understand 💀

[@BurhanHasan-u9c]

Hey how can I chnage its transition from topto bottom

[@josipjak]

Hamburger works great when my page are open in minimize screen, but when I return page in full screen navbar disappear. Help?

[@peaklegacy146]

I have my nav items come in from the top instead of the left. How should I go about making the Items transition from behind the header. It all works well now but its infront of the header for just a second

[@abumdnayeemkhan7211]

Very helpful video

[@Brightangel001]

Thanks!

[@codefoxx]

Absolutely, thank you !

[@seand6906]

Bravo!

[@PRINCEDAKSHWEB_WIZARD]

Thank you bro

[@mithilakaluarachchi1]

Hi, my code runs 1 perfectly and now it gives the error " expected identifier instead saw 'const'. please help

[@jamesenrique648]

Wow, it works! Gracias✌