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/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : [e-mail]
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

[@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!!!

[@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]

😅😅😅😅😅😅😅

[@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

[@thetr8r469]

Genuinely a really big help for my website. I had put off making a popup menu for so long because the last explanation I saw made my head spin. This was easy to digest and easily customizable. Big thanks.

[@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

[@nkanganthony9794]

You have got some way to deliver what no one else can in my many years or self learning. Thank you so much.

[@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!

[@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 ❤️

[@sorane8910]

You don't know how much pain I had to make that thing work, and it never worked until I discover this video.
Thank you a lot.

[@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

[@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.

[@ashwinsaxena4734]

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

[@sabrinashamsiddinova7691]

Best easy responsive menu tutorial I found after scrolling thro internet for an hour

[@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.

[@mrahmancad]

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.

[@joshuamichael845]

I've learnt alot since I subscribed to this channel, your videos are always comprehensive and precise.

[@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

[@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

[@akshaykhatri2027]

Probably one of the best 😂 stuff, the way you turned hamburger into cross. Appreciable 🌸✨👍

[@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

[@KozenDGray]

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

[@rakibhasan9401]

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

[@premierleaguematches4307]

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

[@elvirakopstala6519]

Thank you! This was super helpful.

[@trevormadden4301]

Cheers man. Nicely put

[@giulia6930]

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

[@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

[@leroymokobi2928]

Very simple, clear and straight forward. Yhanks a lot

[@user-ch9ep2ol9r]

Thank you so much for a brilliant tutorial!

[@hannahsaseun2381]

this was really helpful. thank you for making it so simple for me

[@ocel1416]

Great tutorial! You help me so much. This tutorial was it what i needed.

[@martienvliet8812]

tysm, this helped me so much, cool vid bro keep up the good work

[@sayantandey4708]

Making the cross was dope ...
You deserve more subscriber...

[@nnejiben]

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

[@jamesdeske4327]

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

[@codefoxx]

🙂

[@wawananggana5129]

Simple and straight tutorial.. thank you..

[@roberttanasie5943]

Hello, you have an excellent way of explaining and your videos are on point and easy to understand !!!

[@prashantmishra5691]

Great stuff. Subbed!

[@dktk7]

Thank You, this tutorial was so easy to understand. 😁

[@kzhang3835]

Thank you so much. This really works. 👍

[@eliasmailosson9547]

Such a good video man, Thank you!

[@obadayahya6176]

Thanks man !!! , your video was awesome keep up the good work

[@3reinaldo]

Easy, and clean, thanks its a great tutorial

[@_heyise]

This is very helpful. Thank you for this!!

[@klaasjanssen644]

beautiful smooth menu, great job! thx for this video

[@codefoxx]

Absolutely!

[@mahdigholami3916]

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

[@codefoxx]

I appreciate it 🙏

[@goergops9593]

Awesome tut, thanks a lot man

[@simasgradeckas4259]

Super clear & brief tutorial - thanks a lot!

[@Rain_berries]

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

[@superrnaah]

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

[@ff0x]

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

[@NiceChange]

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

[@hamzanakan629]

thanks for this tutorial, it helps me a lot

[@xanny3690]

Good tutorial man 🖤

[@photoinshot1355]

Great video, well explained and demonstrated, easy to follow understand and implement because the tutorial is so well presented. Thanks! Was a great help.

[@hajarahmed304]

thank you so much! this helped a lot

[@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....

[@fannienatourz]

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

[@enssahfayiamomoh8410]

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

[@Justhue]

Thank you this is so helpful

[@theshelbypalace]

this is great video! thank you sooooo much!

[@promiseuka]

Wow, this is an amazing tutorial

[@mcpeko5773]

Great stuff. Subscribed. 🍻

[@vagabondideas9685]

Excellent! Thank-you

[@deeeera]

Wow. It could be this easy? Thank you so much. New subscriber here.

[@MrOrganicz]

Great Video! This really helped me a lot!

[@LightJackKirin]

Splendid video!! Kudos to you mahn. 😮😅

[@Aalii6]

very helpful, thank you!

[@andreapretorius873]

This is so amazing, thank you so much. It was so easy to follow and understand what you were doing.

[@lazy-hero.]

Is it working?

[@arthurradium5823]

@@lazy-hero. it doesnt work for me... (yes i inserted the script link at end of the body) . nav-menu dont appear after clicking on the burger!

[@jagannathps]

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

[@aminul.islam.]

amazing. thank you

[@spiritualforce]

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

[@jaysworldtv4472]

Thank you so much for this information 💯🙏

[@gatocode316]

looks awesome!

[@giulia6930]

thanks, you enlighted me. it's really hard to find a clear explanation.

[@JimKernix]

Excellent!

[@kiimkeophukdee8031]

You've just save my life!!!

[@bLitzKinG20]

Thanks bro! Liked & Subbed.

[@jamesenrique648]

Wow, it works!
Gracias✌

[@muhammadakram1701]

The best tutorial

[@graybab]

You are a lifesaver

[@daniellozano6908]

excellent ! thank you!

[@jakob6123]

Solid tutorial

[@user-zw6fx5ro4y]

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

[@codefoxx]

I got you

[@Bigkcee]

Thanks for the video it really was helpful

[@GabbyBrucebru]

Thanks for your tutorial it help me

[@ZikreMustafaSAW]

Smart work

[@myclassroom1649]

Thanks you so much you made my day

[@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

[@adrianCoding]

Thanks good tutorial

[@lil-gen]

Thank u sooooo much !!!

[@PRINCEDAKSHWEB_WIZARD]

Thank you bro

[@MrBrady95]

Awesome, thanks! Liked and subscribed!

[@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.

[@JoseMedina-in6ji]

I just want to say that you are the shit!! Keep it up brother, you'll definitely grow on TH-cam doing this stuff, good voice, right pace, great and simple coding (no homo). I rarely comment. and even less subscribe! You earned the subscribe hands-down. I Look forward to seeing more content.
funny story, I spent 30 minutes trying to figure out why JavaScript wasn't working (first time with JS), just to realize that my dumbass didn't do the hamburger class on html, SMH.
peace!🤙

[@abdelrhmanhussein6759]

Beast!

[@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

[@user-ty5pd4xw2y]

It was perfect))

[@seand6906]

Bravo!