Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How to Build a Responsive Navigation Bar with Flexbox

Envato Tuts+ via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Dive into a practical 31-minute video tutorial on creating a mobile-first, responsive navigation bar using flexbox. Learn to craft a toggleable menu with distinct layouts for mobile, tablet, and desktop screens. Master the process of structuring HTML, applying basic styles, implementing mobile navigation, styling submenus, integrating Font Awesome icons, adding toggle and dropdown functionalities, and designing tablet and desktop menu versions. Gain hands-on experience in modern web design techniques while building a versatile navigation component adaptable to various screen sizes.

Syllabus

Intro
The Markup
Let's Add Some Basic Styling
Let's Create the Mobile Navigation
Let's Style the Submenus
Font Awesome
Let's Add the Toggle Functionality
Let's Add the Dropdown Functionality
Let's Create the Tablet Menu
Let's Create the Desktop Menu

Taught by

Envato Tuts+

Reviews

Start your review of How to Build a Responsive Navigation Bar with Flexbox

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.