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

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

[@nkanganthony9794]

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

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

😅😅😅😅😅😅😅

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

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

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

[@solitarycreations]

Thank you! Nice, clean and easy to follow!

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

[@joshuamichael845]

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

[@premierleaguematches4307]

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

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

[@akshaykhatri2027]

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

[@trevormadden4301]

Cheers man. Nicely put

[@sabrinashamsiddinova7691]

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

[@KozenDGray]

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

[@vendettamalize7209]

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

[@elvirakopstala6519]

Thank you! This was super helpful.

[@wawananggana5129]

Simple and straight tutorial.. thank you..

[@leroymokobi2928]

Very simple, clear and straight forward. Yhanks a lot

[@user-ch9ep2ol9r]

Thank you so much for a brilliant tutorial!

[@giulia6930]

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

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

[@hannahsaseun2381]

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

[@sayantandey4708]

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

[@3reinaldo]

Easy, and clean, thanks its a great tutorial

[@kzhang3835]

Thank you so much. This really works. 👍

[@prashantmishra5691]

Great stuff. Subbed!

[@dktk7]

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

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

[@MrBrady95]

Awesome, thanks! Liked and subscribed!

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

[@goergops9593]

Awesome tut, thanks a lot man

[@eliasmailosson9547]

Such a good video man, Thank you!

[@rakibhasan9401]

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

[@nnejiben]

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

[@xanny3690]

Good tutorial man 🖤

[@vagabondideas9685]

Excellent! Thank-you

[@ocel1416]

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

[@daniellozano6908]

excellent ! thank you!

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

[@hamzanakan629]

thanks for this tutorial, it helps me a lot

[@NiceChange]

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

[@martienvliet8812]

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

[@_heyise]

This is very helpful. Thank you for this!!

[@Justhue]

Thank you this is so helpful

[@jamesdeske4327]

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

[@codefoxx]

🙂

[@enssahfayiamomoh8410]

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

[@aminul.islam.]

amazing. thank you

[@obadayahya6176]

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

[@roberttanasie5943]

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

[@promiseuka]

Wow, this is an amazing tutorial

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

[@fannienatourz]

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

[@simasgradeckas4259]

Super clear & brief tutorial - thanks a lot!

[@muhammadakram1701]

The best tutorial

[@hajarahmed304]

thank you so much! this helped a lot

[@mcpeko5773]

Great stuff. Subscribed. 🍻

[@Aalii6]

very helpful, thank you!

[@mahdigholami3916]

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

[@codefoxx]

I appreciate it 🙏

[@theshelbypalace]

this is great video! thank you sooooo much!

[@MrOrganicz]

Great Video! This really helped me a lot!

[@kiimkeophukdee8031]

You've just save my life!!!

[@gatocode316]

looks awesome!

[@klaasjanssen644]

beautiful smooth menu, great job! thx for this video

[@codefoxx]

Absolutely!

[@graybab]

You are a lifesaver

[@jaysworldtv4472]

Thank you so much for this information 💯🙏

[@ff0x]

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

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

[@LightJackKirin]

Splendid video!! Kudos to you mahn. 😮😅

[@jakob6123]

Solid tutorial

[@JimKernix]

Excellent!

[@giulia6930]

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

[@jagannathps]

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

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

[@deeeera]

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

[@ZikreMustafaSAW]

Smart work

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

[@jamesenrique648]

Wow, it works!
Gracias✌

[@Bigkcee]

Thanks for the video it really was helpful

[@spiritualforce]

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

[@GabbyBrucebru]

Thanks for your tutorial it help me

[@adrianCoding]

Thanks good tutorial

[@myclassroom1649]

Thanks you so much you made my day

[@PRINCEDAKSHWEB_WIZARD]

Thank you bro

[@lil-gen]

Thank u sooooo much !!!

[@him_nshu5269]

Thankyou so much working for me

[@bLitzKinG20]

Thanks bro! Liked & Subbed.

[@farukweb]

excellent tutorial.

[@user-zw6fx5ro4y]

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

[@codefoxx]

I got you

[@seand6906]

Bravo!

[@Brightangel001]

Thanks!

[@codefoxx]

Absolutely, thank you !

[@zezeseshill3032]

thank you

[@microhandsltd]

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