Building a Complete Responsive Navigation Bar with Flexbox0%

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Building a Complete Responsive Navigation Bar with Flexbox

Intermediate13 min read•Updated: 2026-09-10

Every website you visit—from your school's official CBSE portal to YouTube and Wikipedia—begins with the exact same component at the top of the screen: the Navigation Bar (Navbar).

Take a close look at a school website header:

1
Zone 1 (Far Left): The school logo and emblem ("Kendriya Vidyalaya").
2
Zone 2 (Center / Middle): Key section links ("About Us", "Academics", "Admissions", "Notice Board").
3
Zone 3 (Far Right): A high-priority action button ("Student ERP Login" or "Pay Fees").

On a laptop screen, these three zones sit comfortably on one horizontal line. But on a mobile smartphone, the middle links tuck neatly away behind a Hamburger Menu Icon (☰) so the screen isn't cluttered!

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE 3-ZONE FLEXBOX NAVBAR ARCHITECTURE                 |
|                                                                         |
|  DESKTOP (> 768px): justify-content: space-between; align-items: center;|
|  +-------------------------------------------------------------------+  |
|  | [🏫 School Logo]   [Home] [Academics] [Sports]   [Login Button]   |  |
|  +-------------------------------------------------------------------+  |
|         Zone 1                    Zone 2                 Zone 3         |
|                                                                         |
|  MOBILE (<= 768px): Header stays, links collapse into vertical drawer!  |
|  +-------------------------------------------------------------------+  |
|  | [🏫 School Logo]                                   [☰ Menu Icon]  |  |
|  |-------------------------------------------------------------------|  |
|  |  [Home]                                                           |  |
|  |  [Academics]                                                      |  |
|  |  [Sports]                                                         |  |
|  |  [Login Button]                                                   |  |
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+

Building a responsive navigation bar is a rite of passage for every web developer. In this comprehensive tutorial, you will build a complete, production-grade navigation bar using modern Flexbox principles.

1. Semantic HTML Structure: The 3 Zones

A professional navbar should always use semantic HTML tags (<header>, <nav>, <ul>, <a>, <button>) for accessibility and search engine ranking:

1<header class="navbar-wrapper">
<nav class="navbar">
  
  <!-- Zone 1: Brand / Logo -->
  <a href="/" class="brand-logo">
    <span class="logo-icon">🎓</span>
    <span class="brand-name">Delhi Public Academy</span>
  </a>
9 
  <!-- Mobile Hamburger Toggle (Pure CSS Checkbox Hack) -->
  <input type="checkbox" id="nav-toggle" class="nav-toggle-input">
  <label for="nav-toggle" class="hamburger-btn" aria-label="Toggle Navigation">
    <span></span>
    <span></span>
    <span></span>
  </label>
17 
  <!-- Zone 2: Navigation Links -->
  <ul class="nav-menu">
    <li><a href="#about" class="nav-link">About Us</a></li>
    <li><a href="#academics" class="nav-link">Academics</a></li>
    <li><a href="#admissions" class="nav-link">Admissions</a></li>
    <li><a href="#campus" class="nav-link">Campus Life</a></li>
  </ul>
25 
  <!-- Zone 3: Call-To-Action Button -->
  <div class="nav-actions">
    <a href="#portal" class="btn-cta">Student Portal</a>
  </div>
30 
</nav>
32</header>

2. Desktop Flexbox Styling

On desktop screens, Flexbox does all the heavy lifting in just a few lines:

1/* 1. Navbar Container: Horizontal space distribution */
navbar {
display: flex;
justify-content: space-between; /* Pushes Logo to Left, CTA to Right */
align-items: center;            /* Perfect vertical centering */
max-width: 1200px;
margin: 0 auto;
padding: 16px 24px;
9}
10 
11/* 2. Brand Logo: Horizontal alignment of icon and text */
brand-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 700;
font-size: 1.25rem;
color: #0f172a;
20}
21 
22/* 3. Links Menu: Horizontal list without bullets */
nav-menu {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
30}
31 
nav-link {
text-decoration: none;
color: #475569;
font-weight: 500;
font-size: 0.95rem;
position: relative;
transition: color 0.2s ease;
39}
40 
41/* 4. Elegant Hover Micro-Interaction: Animated underline */
nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s ease;
51}
52 
nav-link:hover {
color: #2563eb;
55}
56 
nav-link:hover::after {
width: 100%;
59}

3. Mobile Responsiveness: The Hamburger Collapse

On screens narrower than 768px, we hide the desktop horizontal menu and reveal a hamburger button. When tapped, the navigation menu drops down as a smooth vertical drawer:

1/* Hide mobile toggle on desktop */
nav-toggle-input,
hamburger-btn {
display: none;
5}
6 
7/* MOBILE MEDIA QUERY (<= 768px) */
8@media (max-width: 768px) {
/* Show hamburger button */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 100;
}
17 
.hamburger-btn span {
  width: 24px;
  height: 3px;
  background-color: #0f172a;
  border-radius: 2px;
  transition: all 0.3s ease;
}
25 
/* Transform Zone 2 into a full-width dropdown */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  flex-direction: column;       /* Vertical stack */
  align-items: flex-start;
  padding: 24px;
  gap: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e2e8f0;
  
  /* Initially hidden */
  display: none;
}
43 
/* When checkbox is checked, reveal menu! */
.nav-toggle-input:checked ~ .nav-menu {
  display: flex;
}
48 
/* Hide the action button on compact header or move inside drawer */
.nav-actions {
  display: none;
}
53}

To keep the navbar pinned at the very top of the window while the user scrolls down the admission page, use position: sticky:

navbar-wrapper {
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px); /* Modern frosted glass effect */
border-bottom: 1px solid #e2e8f0;
z-index: 1000;
8}

5. Common Mistakes to Avoid (Do's and Don'ts)

Bad Practice (Don't)	Good Practice (Do)	Why?
Using `float: left` and `float: right` for navbar links	Use `display: flex; justify-content: space-between;`	Floats require clearfixes and easily collapse on mobile screens.
Forgetting `align-items: center` on the navbar	Always declare `align-items: center;`	Prevents the logo, links, and buttons from having mismatched vertical baselines.
Using plain `<div>` tags without semantic `<nav>`	Wrap menu links inside `<nav aria-label="Main Navigation">`	Essential for screen readers and SEO indexing.
Hardcoding fixed 800px widths on the navbar container	Use `max-width: 1200px; width: 100%;`	Prevents horizontal scrollbars on phones.

6. Quick Revision Summary (Cheat Sheet)

The 3 Zones: Brand Logo (left), Navigation Links (center/left), Action CTA (right).
Base Container: display: flex; justify-content: space-between; align-items: center; perfectly aligns all three zones with zero floats.
Link Spacing: Use display: flex; gap: 32px; on the <ul> list instead of messy individual margins.
Mobile Drawer: Inside @media (max-width: 768px), switch .nav-menu to flex-direction: column; positioned absolutely below the header.
Sticky Header: position: sticky; top: 0; z-index: 1000; keeps the flex header accessible throughout the user's browsing journey.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

Which combination of CSS properties positions the logo on the far left, links in the center, and CTA button on the far right of a navbar?

Question 2

Why is align-items: center; essential on a navbar flex container?

Question 3

What semantic HTML element should always wrap the main website navigation links?

Question 4

How can the desktop horizontal link list (flex-direction: row) be transformed into a vertical dropdown menu on mobile screens?

Question 5

What CSS property keeps a navbar visible at the top of the browser viewport while the user scrolls down the page?

Construct a complete, production-grade school navigation bar with:

1
A sticky frosted glass header (backdrop-filter: blur(8px)).
2
A 3-zone desktop layout using justify-content: space-between; align-items: center;.
3
Animated hover underlines on all navigation links.
4
A pure-CSS responsive mobile hamburger drawer that expands seamlessly on small viewports!

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>DPS International - Responsive Flexbox Navbar</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
12 
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    min-height: 150vh; /* Allows testing sticky scroll */
  }
19 
  /* 1. STICKY NAVBAR WRAPPER */
  .header-wrapper {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    z-index: 1000;
  }
29 
  /* 2. THE MAIN FLEXBOX NAVBAR */
  .navbar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between; /* 3 Zones spaced apart */
    align-items: center;            /* Perfect vertical centering */
    position: relative;
  }
40 
  /* ZONE 1: BRAND LOGO */
  .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
48 
  .brand-crest {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
  }
61 
  .brand-text h1 {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 700;
  }
67 
  .brand-text span {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
  }
73 
  /* ZONE 2: DESKTOP NAV LINKS */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
  }
81 
  .nav-link {
    text-decoration: none;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    transition: color 0.2s ease;
  }
91 
  /* Animated underline */
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #2563eb;
    transition: width 0.25s ease;
  }
103 
  .nav-link:hover {
    color: #2563eb;
  }
107 
  .nav-link:hover::after {
    width: 100%;
  }
111 
  /* ZONE 3: CALL TO ACTION BUTTON */
  .btn-portal {
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
    transition: background-color 0.2s, transform 0.1s;
  }
124 
  .btn-portal:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
  }
129 
  /* MOBILE HAMBURGER MECHANICS (PURE CSS) */
  .menu-toggle,
  .hamburger-icon {
    display: none;
  }
135 
  /* RESPONSIVE BREAKPOINT (<= 768px) */
  @media (max-width: 768px) {
    .hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 26px;
      height: 18px;
      cursor: pointer;
    }
146 
    .hamburger-icon span {
      height: 3px;
      width: 100%;
      background-color: #0f172a;
      border-radius: 3px;
    }
153 
    /* Collapsed Mobile Drawer */
    .nav-links {
      display: none; /* Hidden until toggled */
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #ffffff;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 24px;
      gap: 16px;
      border-bottom: 1px solid #e2e8f0;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    }
169 
    /* Toggle behavior */
    .menu-toggle:checked ~ .nav-links {
      display: flex;
    }
174 
    .btn-portal {
      display: none; /* Hide button on compact header */
    }
  }
179 
  /* Mock Page Hero */
  .hero-content {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 24px;
    text-align: center;
  }
187 
  .hero-content h2 {
    font-size: 2.4rem;
    color: #0f172a;
    margin-bottom: 16px;
  }
193 
  .hero-content p {
    color: #64748b;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
  }
</style>
201</head>
202<body>
203 
<header class="header-wrapper">
  <nav class="navbar">
    
    <!-- Zone 1: School Logo -->
    <a href="#" class="brand-logo">
      <div class="brand-crest">DPS</div>
      <div class="brand-text">
        <h1>DPS International</h1>
        <span>Knowledge &bull; Integrity &bull; Service</span>
      </div>
    </a>
215 
    <!-- CSS Checkbox Toggle -->
    <input type="checkbox" id="mobile-menu" class="menu-toggle">
    <label for="mobile-menu" class="hamburger-icon" aria-label="Toggle menu">
      <span></span>
      <span></span>
      <span></span>
    </label>
223 
    <!-- Zone 2: Navigation Links -->
    <ul class="nav-links">
      <li><a href="#" class="nav-link">Admissions 2026</a></li>
      <li><a href="#" class="nav-link">Academics</a></li>
      <li><a href="#" class="nav-link">Campus Facilities</a></li>
      <li><a href="#" class="nav-link">Sports & Arts</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
232 
    <!-- Zone 3: CTA Button -->
    <a href="#" class="btn-portal">Parent ERP Login</a>
235 
  </nav>
</header>
238 
<main class="hero-content">
  <h2>Welcome to Academic Excellence</h2>
  <p>Empowering the next generation of global leaders, thinkers, and innovators since 1994.</p>
</main>
243 
244</body>
245</html>

Next Lesson

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Flex Wrapping and Nested Flexbox: Multi-Row Grids and Micro-Components	CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Building a Complete Responsive Navigation Bar with Flexbox

Intermediate13 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Every website you visit—from your school's official CBSE portal to YouTube and Wikipedia—begins with the exact same component at the top of the screen: the Navigation Bar (Navbar).

Take a close look at a school website header:

1
Zone 1 (Far Left): The school logo and emblem ("Kendriya Vidyalaya").
2
Zone 2 (Center / Middle): Key section links ("About Us", "Academics", "Admissions", "Notice Board").
3
Zone 3 (Far Right): A high-priority action button ("Student ERP Login" or "Pay Fees").

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE 3-ZONE FLEXBOX NAVBAR ARCHITECTURE                 |
|                                                                         |
|  DESKTOP (> 768px): justify-content: space-between; align-items: center;|
|  +-------------------------------------------------------------------+  |
|  | [🏫 School Logo]   [Home] [Academics] [Sports]   [Login Button]   |  |
|  +-------------------------------------------------------------------+  |
|         Zone 1                    Zone 2                 Zone 3         |
|                                                                         |
|  MOBILE (<= 768px): Header stays, links collapse into vertical drawer!  |
|  +-------------------------------------------------------------------+  |
|  | [🏫 School Logo]                                   [☰ Menu Icon]  |  |
|  |-------------------------------------------------------------------|  |
|  |  [Home]                                                           |  |
|  |  [Academics]                                                      |  |
|  |  [Sports]                                                         |  |
|  |  [Login Button]                                                   |  |
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+

1. Semantic HTML Structure: The 3 Zones

A professional navbar should always use semantic HTML tags (<header>, <nav>, <ul>, <a>, <button>) for accessibility and search engine ranking:

1<header class="navbar-wrapper">
<nav class="navbar">
  
  <!-- Zone 1: Brand / Logo -->
  <a href="/" class="brand-logo">
    <span class="logo-icon">🎓</span>
    <span class="brand-name">Delhi Public Academy</span>
  </a>
9 
  <!-- Mobile Hamburger Toggle (Pure CSS Checkbox Hack) -->
  <input type="checkbox" id="nav-toggle" class="nav-toggle-input">
  <label for="nav-toggle" class="hamburger-btn" aria-label="Toggle Navigation">
    <span></span>
    <span></span>
    <span></span>
  </label>
17 
  <!-- Zone 2: Navigation Links -->
  <ul class="nav-menu">
    <li><a href="#about" class="nav-link">About Us</a></li>
    <li><a href="#academics" class="nav-link">Academics</a></li>
    <li><a href="#admissions" class="nav-link">Admissions</a></li>
    <li><a href="#campus" class="nav-link">Campus Life</a></li>
  </ul>
25 
  <!-- Zone 3: Call-To-Action Button -->
  <div class="nav-actions">
    <a href="#portal" class="btn-cta">Student Portal</a>
  </div>
30 
</nav>
32</header>

2. Desktop Flexbox Styling

On desktop screens, Flexbox does all the heavy lifting in just a few lines:

1/* 1. Navbar Container: Horizontal space distribution */
navbar {
display: flex;
justify-content: space-between; /* Pushes Logo to Left, CTA to Right */
align-items: center;            /* Perfect vertical centering */
max-width: 1200px;
margin: 0 auto;
padding: 16px 24px;
9}
10 
11/* 2. Brand Logo: Horizontal alignment of icon and text */
brand-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 700;
font-size: 1.25rem;
color: #0f172a;
20}
21 
22/* 3. Links Menu: Horizontal list without bullets */
nav-menu {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
30}
31 
nav-link {
text-decoration: none;
color: #475569;
font-weight: 500;
font-size: 0.95rem;
position: relative;
transition: color 0.2s ease;
39}
40 
41/* 4. Elegant Hover Micro-Interaction: Animated underline */
nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s ease;
51}
52 
nav-link:hover {
color: #2563eb;
55}
56 
nav-link:hover::after {
width: 100%;
59}

3. Mobile Responsiveness: The Hamburger Collapse

On screens narrower than 768px, we hide the desktop horizontal menu and reveal a hamburger button. When tapped, the navigation menu drops down as a smooth vertical drawer:

1/* Hide mobile toggle on desktop */
nav-toggle-input,
hamburger-btn {
display: none;
5}
6 
7/* MOBILE MEDIA QUERY (<= 768px) */
8@media (max-width: 768px) {
/* Show hamburger button */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 100;
}
17 
.hamburger-btn span {
  width: 24px;
  height: 3px;
  background-color: #0f172a;
  border-radius: 2px;
  transition: all 0.3s ease;
}
25 
/* Transform Zone 2 into a full-width dropdown */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  flex-direction: column;       /* Vertical stack */
  align-items: flex-start;
  padding: 24px;
  gap: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e2e8f0;
  
  /* Initially hidden */
  display: none;
}
43 
/* When checkbox is checked, reveal menu! */
.nav-toggle-input:checked ~ .nav-menu {
  display: flex;
}
48 
/* Hide the action button on compact header or move inside drawer */
.nav-actions {
  display: none;
}
53}

To keep the navbar pinned at the very top of the window while the user scrolls down the admission page, use position: sticky:

navbar-wrapper {
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px); /* Modern frosted glass effect */
border-bottom: 1px solid #e2e8f0;
z-index: 1000;
8}

5. Common Mistakes to Avoid (Do's and Don'ts)

Bad Practice (Don't)	Good Practice (Do)	Why?
Using `float: left` and `float: right` for navbar links	Use `display: flex; justify-content: space-between;`	Floats require clearfixes and easily collapse on mobile screens.
Forgetting `align-items: center` on the navbar	Always declare `align-items: center;`	Prevents the logo, links, and buttons from having mismatched vertical baselines.
Using plain `<div>` tags without semantic `<nav>`	Wrap menu links inside `<nav aria-label="Main Navigation">`	Essential for screen readers and SEO indexing.
Hardcoding fixed 800px widths on the navbar container	Use `max-width: 1200px; width: 100%;`	Prevents horizontal scrollbars on phones.

6. Quick Revision Summary (Cheat Sheet)

The 3 Zones: Brand Logo (left), Navigation Links (center/left), Action CTA (right).
Base Container: display: flex; justify-content: space-between; align-items: center; perfectly aligns all three zones with zero floats.
Link Spacing: Use display: flex; gap: 32px; on the <ul> list instead of messy individual margins.
Mobile Drawer: Inside @media (max-width: 768px), switch .nav-menu to flex-direction: column; positioned absolutely below the header.
Sticky Header: position: sticky; top: 0; z-index: 1000; keeps the flex header accessible throughout the user's browsing journey.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

Which combination of CSS properties positions the logo on the far left, links in the center, and CTA button on the far right of a navbar?

Question 2

Why is align-items: center; essential on a navbar flex container?

Question 3

What semantic HTML element should always wrap the main website navigation links?

Question 4

How can the desktop horizontal link list (flex-direction: row) be transformed into a vertical dropdown menu on mobile screens?

Question 5

What CSS property keeps a navbar visible at the top of the browser viewport while the user scrolls down the page?

Construct a complete, production-grade school navigation bar with:

1
A sticky frosted glass header (backdrop-filter: blur(8px)).
2
A 3-zone desktop layout using justify-content: space-between; align-items: center;.
3
Animated hover underlines on all navigation links.
4
A pure-CSS responsive mobile hamburger drawer that expands seamlessly on small viewports!

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>DPS International - Responsive Flexbox Navbar</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
12 
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    min-height: 150vh; /* Allows testing sticky scroll */
  }
19 
  /* 1. STICKY NAVBAR WRAPPER */
  .header-wrapper {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    z-index: 1000;
  }
29 
  /* 2. THE MAIN FLEXBOX NAVBAR */
  .navbar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between; /* 3 Zones spaced apart */
    align-items: center;            /* Perfect vertical centering */
    position: relative;
  }
40 
  /* ZONE 1: BRAND LOGO */
  .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
48 
  .brand-crest {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
  }
61 
  .brand-text h1 {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 700;
  }
67 
  .brand-text span {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
  }
73 
  /* ZONE 2: DESKTOP NAV LINKS */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
  }
81 
  .nav-link {
    text-decoration: none;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    transition: color 0.2s ease;
  }
91 
  /* Animated underline */
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #2563eb;
    transition: width 0.25s ease;
  }
103 
  .nav-link:hover {
    color: #2563eb;
  }
107 
  .nav-link:hover::after {
    width: 100%;
  }
111 
  /* ZONE 3: CALL TO ACTION BUTTON */
  .btn-portal {
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
    transition: background-color 0.2s, transform 0.1s;
  }
124 
  .btn-portal:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
  }
129 
  /* MOBILE HAMBURGER MECHANICS (PURE CSS) */
  .menu-toggle,
  .hamburger-icon {
    display: none;
  }
135 
  /* RESPONSIVE BREAKPOINT (<= 768px) */
  @media (max-width: 768px) {
    .hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 26px;
      height: 18px;
      cursor: pointer;
    }
146 
    .hamburger-icon span {
      height: 3px;
      width: 100%;
      background-color: #0f172a;
      border-radius: 3px;
    }
153 
    /* Collapsed Mobile Drawer */
    .nav-links {
      display: none; /* Hidden until toggled */
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #ffffff;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 24px;
      gap: 16px;
      border-bottom: 1px solid #e2e8f0;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    }
169 
    /* Toggle behavior */
    .menu-toggle:checked ~ .nav-links {
      display: flex;
    }
174 
    .btn-portal {
      display: none; /* Hide button on compact header */
    }
  }
179 
  /* Mock Page Hero */
  .hero-content {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 24px;
    text-align: center;
  }
187 
  .hero-content h2 {
    font-size: 2.4rem;
    color: #0f172a;
    margin-bottom: 16px;
  }
193 
  .hero-content p {
    color: #64748b;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
  }
</style>
201</head>
202<body>
203 
<header class="header-wrapper">
  <nav class="navbar">
    
    <!-- Zone 1: School Logo -->
    <a href="#" class="brand-logo">
      <div class="brand-crest">DPS</div>
      <div class="brand-text">
        <h1>DPS International</h1>
        <span>Knowledge &bull; Integrity &bull; Service</span>
      </div>
    </a>
215 
    <!-- CSS Checkbox Toggle -->
    <input type="checkbox" id="mobile-menu" class="menu-toggle">
    <label for="mobile-menu" class="hamburger-icon" aria-label="Toggle menu">
      <span></span>
      <span></span>
      <span></span>
    </label>
223 
    <!-- Zone 2: Navigation Links -->
    <ul class="nav-links">
      <li><a href="#" class="nav-link">Admissions 2026</a></li>
      <li><a href="#" class="nav-link">Academics</a></li>
      <li><a href="#" class="nav-link">Campus Facilities</a></li>
      <li><a href="#" class="nav-link">Sports & Arts</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
232 
    <!-- Zone 3: CTA Button -->
    <a href="#" class="btn-portal">Parent ERP Login</a>
235 
  </nav>
</header>
238 
<main class="hero-content">
  <h2>Welcome to Academic Excellence</h2>
  <p>Empowering the next generation of global leaders, thinkers, and innovators since 1994.</p>
</main>
243 
244</body>
245</html>

Next Lesson

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Flex Wrapping and Nested Flexbox: Multi-Row Grids and Micro-Components	CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Building a Complete Responsive Navigation Bar with Flexbox

Building a Complete Responsive Navigation Bar with Flexbox

1. Semantic HTML Structure: The 3 Zones

2. Desktop Flexbox Styling

3. Mobile Responsiveness: The Hamburger Collapse

4. Making the Navbar Sticky

5. Common Mistakes to Avoid (Do's and Don'ts)

6. Quick Revision Summary (Cheat Sheet)

Multiple Choice Questions

7. Hands-on Practice Challenge: DPS International Complete Portal Navbar

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Related Lessons

Practice Quiz

Loading Page Content...

Building a Complete Responsive Navigation Bar with Flexbox

Building a Complete Responsive Navigation Bar with Flexbox

1. Semantic HTML Structure: The 3 Zones

2. Desktop Flexbox Styling

3. Mobile Responsiveness: The Hamburger Collapse

4. Making the Navbar Sticky

5. Common Mistakes to Avoid (Do's and Don'ts)

6. Quick Revision Summary (Cheat Sheet)

Multiple Choice Questions

7. Hands-on Practice Challenge: DPS International Complete Portal Navbar

CSS Grid Anatomy: Grid Container, Grid Items, and Grid Lines

Related Lessons

Practice Quiz