How To Create a Responsive Navigation Menu Bar using HTML and CSS | Mobile First

you don't need bootstrap to create a responsive navigation menu, and you shouldn't need to pay for an expensive theme, today, we are gonna learn how to create this hamburger menu with plain CSS.

If you want to see more videos like this, make sure to like and subscribe!

Intro: (0:00)
Tutorial hamburger menu: (0:20)
Result hamburger menu: (9:38)
Coding responsive menu: (10:04)
Result responsive menu: (12:48)
Outro: (13:14)

[totaldiamondgames]

Really professional for your first video, keep it up!

[marie-lyneroustom]

I have probably watched more than 200 videos concerning a responsive mobile first navbar and NOT A SINGLE ONE has been helpful. THANK YOU and keep it up!

[nolan]

A very helpful tutorial, thanks for it.

[tibbsyt]

To anyone who reads, add display:none to the .nav-list in css and then on .nav-list li a.active and .nav-list li a:hover add display: block. Otherwise when scrolling you will be able to highlight the nav menu without pressing the hamburger

[Abrahhhhh]

where can I find the code off this navigation bar I did everything you do in this video but still it doesn't work as it should

[evan.scully]

How did you get the code to autochange on the right as you wrote it. Really good video by the way.

[anythingtech]

He said it "You don't need Bootstrap" or Pay for a Template!

[hiImDoofensmirtz]

I just cant get the hamburger menu. I wrote the code exactly like you. I just have this check box thing in the corner

[rishabhjain]

Just got a new subscriber
Subscriber++

[hackedwither]

Everything works fine but the links only have opacity which means they're still there in the middle of the page, You can even click on those invisible links without clicking the hamburger button. And when I try to add some long text both the text and the links are in the same position is abit messy

[mr.rendero]

Thank you for the video, it was really helpful to me. I found one problem though. You use opacity:0 and opacity:1 to hide and show the menu <li> items, but that way they are still clickable even though they may look hidden. Instead I used display:none and display: block, so that fixes this bug. Thank you once again, good tutorial :)