How to Build a Responsive Navigation Bar with Flexbox

Channel:
Envato Tuts+
Subscribers:
1,630,000
Published on ● Video Link: https://www.youtube.com/watch?v=pnpDhdVUERY


Category:
Tutorial
Duration: 31:08
29,524 views
295

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.

► Download Unlimited WordPress Themes, Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_pnpDhdVUERY&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more on How to Build a Responsive Navigation Bar with Flexbox on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535?utm_campaign=yt_tutsplus_pnpDhdVUERY&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_pnpDhdVUERY&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_pnpDhdVUERY&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



Other Videos By Envato Tuts+


2020-07-18How to Add Custom Graphics and Overlays to Video With Open Broadcaster Software (OBS) Studio
2020-07-174 Ways to Resize Elements in Figma
2020-07-16The Ultimate Guide to Basic Typography
2020-07-14Chill Hip Hop Music [Full Tracks] | Royalty Free Hip Hop Background Music
2020-07-14Divi vs. Elementor: WordPress Page Builders Compared
2020-07-13How to Create a Quick Sparkling Diamonds Text Effect in Adobe Photoshop
2020-07-1210 Best Affinity Publisher Templates (Including Brochure Templates)
2020-07-11How to Create Live Video for Free With Open Broadcaster Software (OBS) Studio
2020-07-11Everything You Need to Know About Affinity Designer Brushes
2020-07-1010 Best WooCommerce Themes: To Make a Better Online Store
2020-07-10How to Build a Responsive Navigation Bar with Flexbox
2020-07-09How to Draw a Line in Photoshop
2020-07-08How to Make Liquid Animation Titles in Adobe After Effects
2020-07-07How to Convert Text to Outlines in Illustrator
2020-07-0610 Top Slideshow Video Templates for Final Cut Pro
2020-07-05Top 10 WPBakery Page Builder (Visual Composer) Add-ons
2020-07-04How to Make Screen Recording for Free With Open Broadcaster Software (OBS) Studio
2020-07-03Create the 80s Style With Fonts, Text Effects, and More! | Retro Design Trend
2020-07-0210 New InDesign Templates Creatives Must Have in Their Arsenal
2020-07-01How to Design a Project Proposal in Adobe InDesign | Free Course
2020-07-01How to Make a Restaurant Menu Template in Affinity Publisher | Free Template


Tags:
responsive navbar
flexbox tutorial
html
Envato Tuts+
navbar
responsive navigation menu
responsive menu
responsive navigation bar tutorial
css navigation
css flexbox
responsive menu bar
flexbox css
flexbox navbar
flexbox
flexbox layout
navigation bar
html navbar
navbar css
responsive navbar html css
flexbox responsive menu
flex navbar
responsive navigation bar
flexbox responsive design
menu with flexbox
how to make a navbar
flexbox mobile
web design