🎨

Responsive Navbar Design 📱

Intermediate

155 XP

60 min

Lesson Content

Responsive Navbar Design 📱

Build a navbar that works perfectly on mobile and desktop. This is essential for every website!

Flexbox Navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    display: none;
  }
}

Example Code

Create a navbar that adapts to screen size

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  background: #333;
  padding: 1rem;
  color: white;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}
@media (max-width: 768px) {
  .nav-links { flex-direction: column; }
}
</style>

Expected Output:

Navbar that stacks on mobile

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code