Responsive Navigation Bar with mobile menu Using HTML & CSS

In this video, I show you how to create a responsive navigation bar with mobile menu using HTML, CSS, and a little bit of javascript. This navbar will work on mobile, tablet, and desktop view sizes. I also included a cool micro animation with the hamburger menu to make the navigation bar more interesting and interactive.

Timestamps:
00:00 Intro
00:20 Desktop HTML
01:50 Desktop CSS
04:36 Mobile HTML
05:15 Mobile CSS
08:18 A little javascript

Where you can find me?
🔗 Links:

#navbar #responsive #html #css

[DevTeacher]

Finally a developer who understands the difference between ID and CLASS and who don’t use only class to everything. Keep up the good work !

[itsyoboiarroi]

you're the best person i have met so far, this tutorial is super amazing, anyone new watching this vid i recommend to add transition to the ul li, it will look smooth,
for real this is the only tutorial worked for me so far, thanks for the work, you're really awesome <3

[liorshish]

thank you very very much I was searching for hours for an easy to understand responsive nav bar.

[fundybanjos]

This really helped me out and taught me a lot, thank you! I'm doing the Odin Project and will eventually get to this stuff, but I needed to do this for a friends portfolio site now.

[KaiBuskirk]

wow! great job!! Love it New Subscriber!

[dotterel]

Hey Adam, I appreciate the hard-work you put into this video, it's perfect! Quick question, what would I need to do to disable scroll when the menu is open? Regards, Jamie.

[Gamerz.]

Could someone please help me, I'm using the same code, but I'm trying to center the product Home and about, but I'm not sure how to do it.

[imagotchi_]

Thank you for the helpful content. Do you have a version that includes a dropdown menu option?

[eightelms]

This developer is a good teacher. He explain things in a way people will understand.
👍5🌟⭐⭐⭐⭐

[shaimastr]

thank you so much you helped me a lot !

[DumbleCash-]

What program are you using in The beginning of The video to preview your website with different widths?

[rahatnadeem]

The query to hide desktop nav is not working for me. Please help.

[NoobDv]

how do i make it so that is is visible on every page without having to copy the whole code?

[andrerouiller]

Hi Adam, first of all thank you for your video. I've tried to do the same as you but when I run mobile version the menu disappears (neither the hamburger menu image appears). I have exactly the same code as you, do you know how to fix it?
Regards, André

[mspencer]

this looks amazing!
Educational and a fun thing to try as always sir.

[crosbycofod]

Are you creating the hamburger icon in this with the bars? I cannot get mine to show up or did you import an icon? Thanks!

[gigaChad]

For some reason the hamburger icon are 3 square block, what did i miss??

[KaiBuskirk]

Did you happen to do follow up videos for footer, content and pages… I was looking but did not find.. thank you for such great teaching will look into more as I learn Danke!

[Shivamgupta.webdeveloper]

Aapne kaha se or konsa course Kiya hai

[tothemaxguy]

Hi ! Nice tutorial. I have a question though. Where is the " .open " class?