Time for a practical exercise in flexbox! In this video tutorial, we will utilize flexbox to produce a mobile-first, responsive, toggleable navigation bar with different designs for mobile, tablet, and desktop screens.
► Download Unlimited WordPress Themes, Stock Photos, Fonts & Templates with Envato Components:
Read more on How to Build a Responsive Navigation Bar with Flexbox on Envato Tuts+:.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -.
Envato Tuts+.
Discover complimentary how-to tutorials and online courses. Style a logo, develop a site, construct an app, or learn a new skill:.
Envato Components.
All the innovative assets you need under one subscription. Customize your project by adding special photos, typefaces, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements:.
► Register For Envato Tuts+ on YouTube:.
► Follow Envato Tuts+ on Twitter:.
► Follow Envato Tuts+ on Facebook:.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -.
CSS Best Sellers
Thank so much for all your videos and information…
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
Hi Cato—the original written version of the whole tutorial by Anna Monus is on Tuts+ https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-navigation-bar-with-flexbox–cms-33535 (and the original pen is here https://codepen.io/tutsplus/details/bGVPVrY) 👍
Hi! Great tutorial. When I type the same HTML code the toggle icon doesn’t appear. Can you please help me?
Same here, did you manage to find out what was wrong Ahmed?
https://codepen.io/adipurdila/pen/GRovpKE
Just found this on the thread if you are still stuck
Did you remember to pull in the FontAwesome CSS? It sounds like your icon is missing 3:12
@Ian Yates Yeh I figured it out after some time. Thanks.
Have you ever considered zooming in to make the code readable?
You’re right, that would likely help a lot of people—thanks
Thank you I learnt alot from the video
Would this be able to convert to a sliding side nav instead?
I am on webstorm and certain things are not working ?
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.
Its not a good idea to make it show on hover on mobile view since we use fingers on mobile. You could do that for desktop view when setting up media query for bigger screen. But again the down arrow next to the links with submenu let users know it should be clicked on for more menu.
Fantastic.
the best ever
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!
thank you so much that’s so helping me ^_^
No problem!
Is there a way to make this without Javascript?
Awesome tutorial, thank you very much!
i have to watch this for school
I learnt a lot thank you.