1. Basic Flex Row
Simple navigation menu using
display: flex with
gap for spacing.
/* Basic Flex Row Navigation */
.nav-menu {
display: flex;
list-style: none;
gap: 30px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 30px;
}
2. Logo + Navigation (space-between)
Logo on left, navigation on right using
justify-content: space-between.
/* Logo left, nav right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
3. Navigation with Call-to-Action Button
Logo left, navigation center, button right. Common pattern for
marketing sites.
/* Three sections: logo, nav, button */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
4. Centered Navigation
All navigation links centered using
justify-content: center.
/* Centered navigation */
.nav-menu {
display: flex;
justify-content: center;
gap: 35px;
}
.nav-menu {
display: flex;
justify-content: center;
gap: 35px;
}
5. Dropdown Ready Navigation
Navigation with dropdown indicator (▼). CSS dropdown will be added on
Day 44.
/* Dropdown indicator using pseudo-element */
.dropdown-arrow::after {
content: " ▼";
font-size: 10px;
}
.dropdown-arrow::after {
content: " ▼";
font-size: 10px;
}
6. Mobile-Friendly Navigation (Responsive)
On desktop: row layout. On mobile: hamburger menu (structure shown,
JavaScript needed for toggle).
/* Mobile responsive */
@media (max-width: 768px) {
.menu-icon { display: block; }
.nav-menu { display: none; }
/* JavaScript toggles display on click */
}
@media (max-width: 768px) {
.menu-icon { display: block; }
.nav-menu { display: none; }
/* JavaScript toggles display on click */
}
📚 Flexbox Properties Used in Navigation Bars
/* Parent Container Properties */
display: flex; /* Enables flexbox */
justify-content: center; /* Horizontal alignment */
justify-content: space-between; /* Push items to edges */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
flex-wrap: wrap; /* Wrap on small screens */
/* Common Mistakes to Avoid */
/* ❌ Forgetting to remove list bullets */
list-style: none; /* ✅ Remove bullets from ul */
/* ❌ Underlines on links */
text-decoration: none; /* ✅ Remove underlines */
/* ❌ Default padding on ul */
padding: 0; /* ✅ Remove default padding */
margin: 0; /* ✅ Remove default margin */
display: flex; /* Enables flexbox */
justify-content: center; /* Horizontal alignment */
justify-content: space-between; /* Push items to edges */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
flex-wrap: wrap; /* Wrap on small screens */
/* Common Mistakes to Avoid */
/* ❌ Forgetting to remove list bullets */
list-style: none; /* ✅ Remove bullets from ul */
/* ❌ Underlines on links */
text-decoration: none; /* ✅ Remove underlines */
/* ❌ Default padding on ul */
padding: 0; /* ✅ Remove default padding */
margin: 0; /* ✅ Remove default margin */
🧠 Quick Quiz
Test your Flexbox navigation knowledge.
/* Question 1: How to put logo on left and nav on right? */
/* Answer: display: flex; justify-content: space-between; */
/* Question 2: How to center all navigation links? */
/* Answer: display: flex; justify-content: center; */
/* Question 3: How to add space between nav items? */
/* Answer: gap: 20px; */
/* Question 4: How to vertically center items? */
/* Answer: align-items: center; */
/* Answer: display: flex; justify-content: space-between; */
/* Question 2: How to center all navigation links? */
/* Answer: display: flex; justify-content: center; */
/* Question 3: How to add space between nav items? */
/* Answer: gap: 20px; */
/* Question 4: How to vertically center items? */
/* Answer: align-items: center; */