Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT




My take on making a responsive navigation bar in 2018 with media queries and a sprinkle of animations and javascript. In this tutorial we are going to learn media queries, keyframe animations, basic javascript toggling, building a burger menu and more!

-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94

Please watch: “Should You Become A Software Engineer?”
https://www.youtube.com/watch?v=V_kTl0eIJ4A

-~-~~-~~~-~~-~-

Original source


38 responses to “Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT”

  1. hello, can someone help me, the overflow-x:hidden; in my pc seems good, but in mobile devices is not working, i had read that mobile browsers don't recognize that property when is in the body tag, so I create a div container and write the same property, but dosent work, I try to write that on the * selector, but I got the same result, I even try to use just overflow:hidden!important; and overflow-x:hidden!important; but anything seems to work, any ideas???

  2. So i'm not sure how but i have managed to have the X display when the menu is closed and the 3 bars when the menu is opened any ideas on how to fix? I've messed up something but i can't figure out what

  3. Hi, I'm facing a slight problem here 🙁
    That whenever I press tab through the site in responsive mode, it shows the hidden overlay. Oh, also how can I knock out the on every refresh it slides in the navigation bar? It has driven me mad.

  4. Thanks for your video, however i think this is a not a good solution. Exploring this on the mobile view you can still scroll on X and see the menu. When you apply the solution most recommend on stack overflow all this becomes useless.

  5. one thing I noticed when I was finished with the tutorial the nav bar in mobile mode always appears when resizing the window automatically and then goes to the side. How do you fix that ??

Leave a Reply