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

  Рет қаралды 266,503

Web Dev Tutorials

Web Dev Tutorials

2 жыл бұрын

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 : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Пікірлер: 305
@mary-hu3ff
@mary-hu3ff 2 жыл бұрын
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
@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
@baazigar5 Жыл бұрын
Just use "defer"
@inakristinethoresen1003
@inakristinethoresen1003 Жыл бұрын
Yup, that fixed my problem! Thank you!
@trillionairemania7750
@trillionairemania7750 11 ай бұрын
hey bro in my case its not working . can u help me with that
@trillionairemania7750
@trillionairemania7750 11 ай бұрын
@@baazigar5 hey bro in my case its not working . can u help me with that
@baazigar5
@baazigar5 11 ай бұрын
@@trillionairemania7750check your js file name
@teenytinytoons
@teenytinytoons Жыл бұрын
Literally the best hamburger tutorial out there hands down. Took me forever to find one where I could understand. Bravo!!
@thetr8r469
@thetr8r469 4 ай бұрын
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.
@evelyntelevision
@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
@jessicalopez6121 3 ай бұрын
😅😅😅😅😅😅😅
@nkanganthony9794
@nkanganthony9794 10 ай бұрын
You have got some way to deliver what no one else can in my many years or self learning. Thank you so much.
@naidenlambev4929
@naidenlambev4929 2 жыл бұрын
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
@edwardwilson4272 2 жыл бұрын
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
@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 ❤️
@rulleywanjau6498
@rulleywanjau6498 2 жыл бұрын
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
@JhonnyBueno 2 жыл бұрын
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.
@joshuamichael845
@joshuamichael845 Жыл бұрын
I've learnt alot since I subscribed to this channel, your videos are always comprehensive and precise.
@JC-hb2ob
@JC-hb2ob 2 жыл бұрын
Thank you very much for this tutorial. I am a beginner and it was really well explained which makes it easier to understand.
@mrahmancad
@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.
@giulia6930
@giulia6930 2 ай бұрын
Thank you, clear and step by step explanation. I was looking for this!❤❤
@akshaykhatri2027
@akshaykhatri2027 2 жыл бұрын
Probably one of the best 😂 stuff, the way you turned hamburger into cross. Appreciable 🌸✨👍
@sorane8910
@sorane8910 9 ай бұрын
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.
@rakibhasan9401
@rakibhasan9401 Жыл бұрын
Thanks man! I appreciate your all the efforts buddy! you cracked complicated matters in the simplest way. #respect
@tomcox8801
@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
@codefoxx Жыл бұрын
Absolutely
@ashwinsaxena4734
@ashwinsaxena4734 2 күн бұрын
The best video to make a responsive nav bar. Thanks for the video!
@KozenDGray
@KozenDGray 2 жыл бұрын
Yo man great tutorial, best one i've found so far.
@roberttanasie5943
@roberttanasie5943 2 жыл бұрын
Hello, you have an excellent way of explaining and your videos are on point and easy to understand !!!
@nnejiben
@nnejiben 11 ай бұрын
This video is awesome and so helpful! Little wonder it came tops in my search result.
@hannahsaseun2381
@hannahsaseun2381 Жыл бұрын
this was really helpful. thank you for making it so simple for me
@kunoichikun
@kunoichikun 2 жыл бұрын
thankyou! was able to incorporate into my existing code easy and now everything looks so much cleaner to what i was doing before!
@codefoxx
@codefoxx 2 жыл бұрын
No problem, I got you
@leroymokobi2928
@leroymokobi2928 9 ай бұрын
Very simple, clear and straight forward. Yhanks a lot
@urosmalic7818
@urosmalic7818 2 жыл бұрын
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
@T25de 2 жыл бұрын
very true
@ocel1416
@ocel1416 Жыл бұрын
Great tutorial! You help me so much. This tutorial was it what i needed.
@vendettamalize7209
@vendettamalize7209 2 жыл бұрын
Thanks you saved my life from hamburger hell, from now on you're my master you have my subscription.
@henriquepinheiroxavier
@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
@codefoxx Жыл бұрын
Anytime, im glad i could help
@sayantandey4708
@sayantandey4708 2 жыл бұрын
Making the cross was dope ... You deserve more subscriber...
@photoinshot1355
@photoinshot1355 6 ай бұрын
Great video, well explained and demonstrated, easy to follow understand and implement because the tutorial is so well presented. Thanks! Was a great help.
@premierleaguematches4307
@premierleaguematches4307 Жыл бұрын
The best js tutorial that i have ever seen, thanks bro.
@martienvliet8812
@martienvliet8812 2 жыл бұрын
tysm, this helped me so much, cool vid bro keep up the good work
@elvirakopstala6519
@elvirakopstala6519 2 жыл бұрын
Thank you! This was super helpful.
@mahdigholami3916
@mahdigholami3916 Жыл бұрын
Greet tutorial, simple and clear.. many thanks for what you are doing man!
@codefoxx
@codefoxx Жыл бұрын
I appreciate it 🙏
@ff0x
@ff0x 2 жыл бұрын
Thankyou so much for this. You've earned another subscriber - great video :)
@enssahfayiamomoh8410
@enssahfayiamomoh8410 Жыл бұрын
This video is very insightful... thank you a lot...I have learned so much from the video
@dktk7
@dktk7 2 жыл бұрын
Thank You, this tutorial was so easy to understand. 😁
@ravitejadarla3882
@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....
@sabrinashamsiddinova7691
@sabrinashamsiddinova7691 Жыл бұрын
Best easy responsive menu tutorial I found after scrolling thro internet for an hour
@superrnaah
@superrnaah Жыл бұрын
was trying to figure out the js to close the hamburger on link click and found it in this video. Thank you!
@wawananggana5129
@wawananggana5129 2 жыл бұрын
Simple and straight tutorial.. thank you..
@simasgradeckas4259
@simasgradeckas4259 2 жыл бұрын
Super clear & brief tutorial - thanks a lot!
@user-ch9ep2ol9r
@user-ch9ep2ol9r 10 ай бұрын
Thank you so much for a brilliant tutorial!
@obadayahya6176
@obadayahya6176 7 ай бұрын
Thanks man !!! , your video was awesome keep up the good work
@trevormadden4301
@trevormadden4301 2 жыл бұрын
Cheers man. Nicely put
@3reinaldo
@3reinaldo Жыл бұрын
Easy, and clean, thanks its a great tutorial
@jamesdeske4327
@jamesdeske4327 Жыл бұрын
Of the 1 million Menu tutorials I have seen this is the BEST
@codefoxx
@codefoxx Жыл бұрын
🙂
@klaasjanssen644
@klaasjanssen644 Жыл бұрын
beautiful smooth menu, great job! thx for this video
@codefoxx
@codefoxx Жыл бұрын
Absolutely!
@fannienatourz
@fannienatourz Жыл бұрын
Thank you so much for this tutorial! This was a life saver. Trust me!😅
@deeeera
@deeeera 2 жыл бұрын
Wow. It could be this easy? Thank you so much. New subscriber here.
@Hassani_70
@Hassani_70 2 жыл бұрын
Man thank you so much. this has really helped me. ❤
@andreapretorius873
@andreapretorius873 Жыл бұрын
This is so amazing, thank you so much. It was so easy to follow and understand what you were doing.
@lazy-hero.
@lazy-hero. Жыл бұрын
Is it working?
@arthurradium5823
@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!
@eliasmailosson9547
@eliasmailosson9547 2 жыл бұрын
Such a good video man, Thank you!
@_heyise
@_heyise 7 ай бұрын
This is very helpful. Thank you for this!!
@edbarr1379
@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.
@giulia6930
@giulia6930 7 ай бұрын
thanks, you enlighted me. it's really hard to find a clear explanation.
@NiceChange
@NiceChange 7 ай бұрын
Thus is some great resources. Great work!!!!
@hamzanakan629
@hamzanakan629 2 жыл бұрын
thanks for this tutorial, it helps me a lot
@spiritualforce
@spiritualforce Жыл бұрын
Damn! You made this look a cake wake for us. New subscriber bro!!
@kzhang3835
@kzhang3835 Ай бұрын
Thank you so much. This really works. 👍
@LightJackKirin
@LightJackKirin Жыл бұрын
Splendid video!! Kudos to you mahn. 😮😅
@vagabondideas9685
@vagabondideas9685 Жыл бұрын
Excellent! Thank-you
@goergops9593
@goergops9593 2 жыл бұрын
Awesome tut, thanks a lot man
@MrOrganicz
@MrOrganicz Жыл бұрын
Great Video! This really helped me a lot!
@prashantmishra5691
@prashantmishra5691 2 ай бұрын
Great stuff. Subbed!
@tobiasbremner9623
@tobiasbremner9623 Жыл бұрын
Despite how short the video was, the developer did a great job explaining explaining the most important lines of code and why he put them there. This great tutorial greatly reduced my work load. Great Job. One small nitpick. As other commenters already said, be sure to mention the JavaScript link in the body. I would suggest taking a couple of seconds at the beginning of the video to show your index page, and point out your CSS link and your JavaScript link for your beginner viewers. Again, great video and thanks for the help.
@xanny3690
@xanny3690 2 жыл бұрын
Good tutorial man 🖤
@MrBrady95
@MrBrady95 Жыл бұрын
Awesome, thanks! Liked and subscribed!
@jaysworldtv4472
@jaysworldtv4472 2 жыл бұрын
Thank you so much for this information 💯🙏
@mcpeko5773
@mcpeko5773 10 ай бұрын
Great stuff. Subscribed. 🍻
@hajarahmed304
@hajarahmed304 9 ай бұрын
thank you so much! this helped a lot
@theshelbypalace
@theshelbypalace 9 ай бұрын
this is great video! thank you sooooo much!
@promiseuka
@promiseuka 2 жыл бұрын
Wow, this is an amazing tutorial
@Aalii6
@Aalii6 Жыл бұрын
very helpful, thank you!
@jagannathps
@jagannathps Жыл бұрын
If i saw this video earlier it could have saved a lot of time
@Firzj
@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 👍👍👍
@BryantCobarrubias
@BryantCobarrubias 2 жыл бұрын
Great demo. I adapted this for my react site. Adding comment to boost your YT algorithm. :)
@codefoxx
@codefoxx 2 жыл бұрын
Awesome and than you
@T25de
@T25de 2 жыл бұрын
boost boost
@spicydoge3847
@spicydoge3847 11 ай бұрын
Great video. With some modifications to the code you presented in the video I was able to make a responsive dropdown style menu.
@andersrammbraten5708
@andersrammbraten5708 10 ай бұрын
what kind of modifications, if you would like to share? mine's not working
@francescaivonnetipianiolor7988
@francescaivonnetipianiolor7988 7 ай бұрын
mine's not working too :( @@andersrammbraten5708
@user-zw6fx5ro4y
@user-zw6fx5ro4y 2 жыл бұрын
Hi, thank you very much! This video really helped me!!!!
@codefoxx
@codefoxx 2 жыл бұрын
I got you
@JoseMedina-in6ji
@JoseMedina-in6ji 6 ай бұрын
I just want to say that you are the shit!! Keep it up brother, you'll definitely grow on KZfaq 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!🤙
@Justhue
@Justhue 6 ай бұрын
Thank you this is so helpful
@Bigkcee
@Bigkcee Жыл бұрын
Thanks for the video it really was helpful
@thecreativeguy4080
@thecreativeguy4080 2 жыл бұрын
Thanks for your tutorial it help me
@daniellozano6908
@daniellozano6908 8 ай бұрын
excellent ! thank you!
@microhandsltd
@microhandsltd 2 жыл бұрын
A great video, I thank you. I'm studying IT at University and this has inspired me to go that extra bit.
@bLitzKinG20
@bLitzKinG20 Жыл бұрын
Thanks bro! Liked & Subbed.
@kiimkeophukdee8031
@kiimkeophukdee8031 Жыл бұрын
You've just save my life!!!
@jamesenrique648
@jamesenrique648 2 жыл бұрын
Wow, it works! Gracias✌
@aminul.islam.
@aminul.islam. 4 ай бұрын
amazing. thank you
@myclassroom1649
@myclassroom1649 2 жыл бұрын
Thanks you so much you made my day
@gatocode316
@gatocode316 Жыл бұрын
looks awesome!
@him_nshu5269
@him_nshu5269 Жыл бұрын
Thankyou so much working for me
@lil-gen
@lil-gen Жыл бұрын
Thank u sooooo much !!!
@JimKernix
@JimKernix Жыл бұрын
Excellent!
@muhammadakram1701
@muhammadakram1701 Ай бұрын
The best tutorial
@graybab
@graybab Жыл бұрын
You are a lifesaver
@adrianCoding
@adrianCoding Жыл бұрын
Thanks good tutorial
@farukweb
@farukweb Жыл бұрын
excellent tutorial.
@ZikreMustafaSAW
@ZikreMustafaSAW Жыл бұрын
Smart work
Responsive Navbar Tutorial
13:35
Web Dev Simplified
Рет қаралды 500 М.
How to build an accessible hamburger menu with HTML, SCSS & JS
13:25
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 35 МЛН
IS THIS REAL FOOD OR NOT?🤔 PIKACHU AND SONIC CONFUSE THE CAT! 😺🍫
00:41
Is it Cake or Fake ? 🍰
00:53
A4
Рет қаралды 17 МЛН
The problem with mobile-first CSS
13:53
Kevin Powell
Рет қаралды 123 М.
Login Form in HTML & CSS
11:07
Codehal
Рет қаралды 1,2 МЛН
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,6 МЛН
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,4 МЛН
How to Create Responsive Navbar using HTML & CSS
16:52
Codehal
Рет қаралды 137 М.
Learn CSS flexbox in 10 minutes! 💪
10:01
Bro Code
Рет қаралды 114 М.
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 35 МЛН