Responsive Nav Bar Tutorial | HTML CSS JS Flexbox Navigation Menu

Learn how to build a nav bar that is fully responsive tutorial with CSS Flexbox. We'll be using some Javascript alongside our HTML & CSS to create the navigation bar menu.

PLEASE SUBSCRIBE!:

Watch: Responsive Pure CSS Menu Tutorial (No JS):

Download project files:

Web Hosting Needs (school code:FollowAndrew for 20% off!):

[naziruadam]

That "order" rule was very handy! I never used it before! Thanks for the thorough explanation.

[drewstifler]

Very informative! Man, do a tutorial of making a page using Flexbox and Grid together. People make dramas of Flexbox vs Grid where in fact they can be used together.

[OrincyWhyteDesigns]

Damn you’re good 🤯🤯 your css nav tutorial was so good. I built 2 back to back. I didn’t even use floats and clears either, your tutorial was so easy to comprehend that I was able to change it around. Can’t wait to try this JS button !!!

[Brandon-srqp]

Great tutorial, thanks! This is the navbar I've been wanting to learn, particularly the functional hamburger menu.

[Gschibby]

Great tutorial, and a great teacher! I really appreciate how you explain the thought process behind what you do and why you do it. I'm fairly new to web-development, but I could still easily follow along the video.

[bruceclark]

Thanks for this - I have completed my navbar! Now back to the make your own wordpress theme - hopefully I can incorporate it!

[rishabkumar]

Great Video. This is the first time I have created an responsive navbar and I learnt it the right way. Thanks Mate!!

[mhhamzaedits]

bro Your language i am not uderstandig but your work is i understandig.
beacuese i am INDIAN 🇮🇳. Good work bro.
Thank You for you tech us.
I speak little inglish.

[brett]

I learned a ton from this tutorial thank you

[djjonnas]

Thanks, now I've learnt how to make a great nav bar

[babygrandadplays]

amazing tutorial, I really appreciate the time you took to give us lessons

[jonathanel-aziz]

Muchas gracias, estoy adentrándome al mundo del flexbox, estoy en un proyecto y ésto era lo que me faltaba hacer.

[amazongirlsfitness]

A comment,
at the logo class style, add
{width: fit-content;}
to adjust the logo to own content, garantee not accidentally clicking logo on empty space at nav bar.
Thanks #FollowAndrew Very good tutorial

[mikersson]

Super clean and simple result and very well explained!!! Thank you so

[icarokiilermelo]

Very good man, it help-me a loot to understand some concepts and techniques of responsive layout

[wandavazquez]

Best tutorial I've followed. Excellent.

[miriamjurkova]

Great video! but u have there some mistakes instead of items u have to write item in order to work properly...
.item.active {
display: block;
}

[dotsysdev]

Very informative, very useful and well explained ! Thank you !

Have a nice year :)

[MohdAmirAnsari]

That was really very amazing! Quite informative!

[ydjznul]

really easy tutorial to follow, thank you! I do have a question - how would i be able to put the logo in the center?