How to Build a Responsive Navbar with HTML CSS

Welcome to this tutorial on How to Build a Responsive Navbar with HTML CSS.

HTML Structure

<nav class="navbar">
  <div class="nav-container">
    <a href="#" class="nav-logo">BrandName</a>
    
    <div class="nav-menu" id="nav-menu">
      <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
      </ul>
    </div>
    
    <div class="nav-toggle" id="nav-toggle">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </div>
</nav>

<main class="content">
  <h1>Responsive Navbar Tutorial</h1>
  <p>Resize the window to see the hamburger menu in action.</p>
</main>

CSS Styling

body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #333; }

.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  text-decoration: none;
}

.nav-menu { display: flex; }
.nav-list {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 30px;
}

.nav-link {
  text-decoration: none;
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-link:hover { color: #3b82f6; }

/* Hamburger Menu Icon */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #333;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
    transition: left 0.4s ease;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  }

  .nav-menu.active { left: 0; }
  .nav-list { flex-direction: column; gap: 40px; margin-top: 40px; align-items: center; }
  .nav-toggle { display: flex; }
  
  /* Toggle Animation */
  .nav-toggle.active .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.content { padding: 40px 20px; text-align: center; }

JavaScript Logic

document.addEventListener('DOMContentLoaded', () => {
    const navToggle = document.getElementById('nav-toggle');
    const navMenu = document.getElementById('nav-menu');

    if(!navToggle || !navMenu) return;

    navToggle.addEventListener('click', () => {
        navMenu.classList.toggle('active');
        navToggle.classList.toggle('active');
    });

    // Close menu when clicking a link
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            navMenu.classList.remove('active');
            navToggle.classList.remove('active');
        });
    });
});