How to Build a Responsive Navigation Bar with Flexbox

Time for a practical exercise in flexbox! In this video tutorial, we will use flexbox to create a mobile-first, responsive, toggleable navigation bar with different layouts for mobile, tablet, and desktop screens.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[Lofiradio-]

I just wanted to say this is one of the best tutorials out there for developing a mobile navigation. I watched quite a few and I kept looking for one that was more intuitive and actually explained the code. Thank god I found this. You earned a sub that is for sure.

[alejandrodinardo]

Awesome tutorial, thank you very much!

[pawanmehalwal]

Thank so much for all your videos and information...

[sanskritseeds]

I observed that *{ padding: 0;} will remove the bullets from the list. Do we still need list-style-type: none? (5:22)

[mauamadoudrammeh]

Thank you I learnt alot from the video

[stevemullen]

I tried this and now if I click on a link the menu stays open. If I click a nav item then try to close it, it scrolls back to the top. Help!

[nippermh]

How can we add some nice transition effects to this menu?

[qtran]

Would this be able to convert to a sliding side nav instead?

[diegomanzanares]

Hello, this was a very nice and useful video but I don´t get why I´m getting a hover effect all over to the right from the logo ending until the links start, is there a way to solve it? Thanks in advance

[murtadhadakhel]

thank you so much that's so helping me ^_^

[shepharddeveloper]

I had a problem but I realized it was my fault, I forgot to put the submenu class to <ul> xD I should pay more attention

[ishmaelsunday]

Is there a way to make this without Javascript?

[cato.]

Is there somewhere I can find a written version of this? or a github repo?
Im not watching 30mins for a nav but well i've been around for a while now doing web.. got interest by looking at how you implemented it and a modern current version maybe of this but damn.. Thanks tho lol

[Lofiradio-]

I tried this in both code pen and in VS code and for whatever reason the "X" doesn't show up after clicking the hamburger icon. The menu drops down in mobile after clicking the hamburger and the "X" is not shown. You can hover over where the "X" should be and click it however the other problem is that the hamburger doesn't show up after either? Anyone have any suggestions?

[sourlito]

I am on webstorm and certain things are not working ?

[ahmedlabeeb]

Hi! Great tutorial. When I type the same HTML code the toggle icon doesn't appear. Can you please help me?

[VinceM]

This is an awesome tutorial but I have one very important question. How would I make the dropdowns show on hover for desktop menu. This is a very important part of the nav menu that I would need.

[davejackson]

Have you ever considered zooming in to make the code readable?