Chapter 12: Responsive Top Navigation
Responsive Top Navigation Bar — one of the most common and most important components in modern websites.
What does “responsive top navigation” actually mean?
It means:
- On large screens (desktop, laptop) → shows logo + horizontal menu links + buttons/icons on the right
- On medium screens → maybe slightly compresses spacing
- On small screens (tablets & phones) → collapses the menu into a hamburger icon and shows a mobile-friendly menu when tapped
- Behaves smoothly, looks good, and is easy to use on every device
We will build it progressively — starting simple, then adding real-world improvements step by step.
Goal design (what we want to achieve)
Desktop (wide screen):
text
|
0 1 2 3 4 5 6 |
[ Logo ] Features Pricing Blog Contact [Search] Login Get Started |
Mobile (narrow screen):
text
|
0 1 2 3 4 5 6 |
[ Logo ] ≡ |
When you tap ≡ → full-screen or slide-down menu appears:
- Features
- Pricing
- Blog
- Contact
- ──────────
- Login
- Get Started
Let’s build it.
Step 1 – Basic HTML structure
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Responsive Top Nav</title> <link rel="stylesheet" href="style.css"> <!-- Font Awesome for icons (optional) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/> </head> <body> <header class="header"> <nav class="navbar"> <!-- Logo --> <a href="#" class="logo"> <strong>Company</strong> </a> <!-- Desktop menu --> <ul class="nav-menu"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> <!-- Right side actions --> <div class="nav-actions"> <a href="#" class="btn-login">Log in</a> <a href="#" class="btn-signup">Sign Up</a> </div> <!-- Hamburger button (mobile only) --> <button class="hamburger" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </nav> <!-- Mobile menu (will be hidden by default) --> <div class="mobile-menu"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li class="divider"></li> <li><a href="#">Log in</a></li> <li><a href="#" class="btn-signup">Sign Up</a></li> </ul> </div> </header> <!-- Just demo content --> <main> <h1>Resize the window to see responsiveness</h1> <p>Try making the browser narrower...</p> </main> <script src="script.js"></script> </body> </html> |
Step 2 – CSS (the heart of responsiveness)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
/* ============================================== Reset & basic styles ============================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background: #f8f9fa; } /* ============================================== Header & Navbar ============================================== */ .header { position: sticky; top: 0; z-index: 1000; background: white; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; padding: 1rem 1.5rem; } /* Logo */ .logo { font-size: 1.6rem; font-weight: 800; color: #111827; text-decoration: none; } /* Desktop menu */ .nav-menu { display: flex; list-style: none; gap: 2.5rem; } .nav-menu a { color: #374151; text-decoration: none; font-weight: 500; padding: 0.5rem 0; transition: color 0.15s; } .nav-menu a:hover, .nav-menu a.active { color: #2563eb; } /* Right actions */ .nav-actions { display: flex; align-items: center; gap: 1.25rem; } .btn-login { color: #374151; font-weight: 500; text-decoration: none; } .btn-signup { background: #2563eb; color: white; padding: 0.6rem 1.3rem; border-radius: 6px; text-decoration: none; font-weight: 500; } /* Hamburger (hidden on desktop) */ .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: none; border: none; cursor: pointer; padding: 0; } .hamburger span { width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: all 0.3s ease; } /* Mobile menu (hidden by default) */ .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border-top: 1px solid #e5e7eb; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding: 1.5rem; } .mobile-menu ul { list-style: none; } .mobile-menu a { display: block; padding: 1rem 0; font-size: 1.15rem; color: #111827; text-decoration: none; } .mobile-menu .btn-signup { display: block; text-align: center; margin-top: 1rem; } .divider { height: 1px; background: #e5e7eb; margin: 1rem 0; } /* ============================================== RESPONSIVE BREAKPOINTS ============================================== */ /* Tablets and smaller laptops */ @media (max-width: 1024px) { .nav-menu { gap: 1.8rem; } } /* Mobile - hide desktop menu, show hamburger */ @media (max-width: 768px) { .nav-menu, .nav-actions > *:not(.hamburger) { display: none; } .hamburger { display: flex; } /* Show mobile menu when active */ .mobile-menu.active { display: block; } } |
Step 3 – JavaScript (just for toggling mobile menu)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
document.addEventListener('DOMContentLoaded', () => { const hamburger = document.querySelector('.hamburger'); const mobileMenu = document.querySelector('.mobile-menu'); hamburger.addEventListener('click', () => { mobileMenu.classList.toggle('active'); // Optional: change hamburger to X hamburger.classList.toggle('active'); }); // Close menu when clicking a link (optional) document.querySelectorAll('.mobile-menu a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.remove('active'); hamburger.classList.remove('active'); }); }); }); |
Add this CSS to animate the hamburger into an X:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } |
Summary – What actually makes it responsive?
| Screen size | What happens | Technique used |
|---|---|---|
| > 1024px (desktop) | Full horizontal menu + buttons | display: flex |
| 769–1024px | Slightly smaller spacing | Media query with smaller gap |
| ≤ 768px (mobile) | Menu disappears, hamburger appears | display: none + .hamburger |
| Mobile menu open | Full-width dropdown / slide-down menu | position: absolute + .active |
Next level improvements (very common in 2025–2026)
- Sticky + shrink on scroll
CSS
|
0 1 2 3 4 5 6 7 8 9 |
.header.scrolled { padding: 0.7rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } |
JavaScript
|
0 1 2 3 4 5 6 7 8 |
window.addEventListener('scroll', () => { document.querySelector('.header').classList.toggle('scrolled', window.scrollY > 60); }); |
- Overlay full-screen mobile menu (very modern)
Change .mobile-menu to height: 100vh; top: 0; display: flex; align-items: center;
- Dropdown submenus on desktop hover
- Search icon that expands into input field
- Active link highlighting based on current URL
Would you like me to show detailed code for any of these next steps?
Examples:
- Full-screen mobile overlay menu
- Dropdown / mega menu on hover
- Search bar that expands on click
- Sticky navbar that shrinks
- Animated slide-in from left for mobile menu
- How to highlight active link automatically
Just tell me which part you want explained slowly with complete code — I’ll go as deep as you need. 😊
