How to Build a Responsive Navbar with HTML & CSS

A navigation bar (navbar) is the most important component of almost every website. Building a responsive navbar — one that displays well on both desktop and mobile — is a must-have skill for a frontend developer. This article guides you through building a responsive navbar complete with a hamburger menu for mobile, using pure HTML and CSS without any library.

Navbar HTML Structure

First, build a semantic HTML structure using the <nav> tag:

<nav class="navbar">
  <div class="nav-container">

    <!-- Logo -->
    <a href="#" class="nav-logo">MyBrand</a>

    <!-- Hamburger button (for mobile) -->
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
      <span class="hamburger"></span>
      <span class="hamburger"></span>
      <span class="hamburger"></span>
    </button>

    <!-- Menu -->
    <ul class="nav-menu" id="navMenu">
      <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">Blog</a></li>
      <li class="nav-item">
        <a href="#" class="nav-link nav-cta">Contact Us</a>
      </li>
    </ul>

  </div>
</nav>

CSS for the Desktop Navbar

Start with the base styles for the desktop view (mobile first, then expand to desktop):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #1e293b;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

.nav-logo {
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
  background-color: #334155;
  color: white;
}

.nav-cta {
  background-color: #3b82f6;
  color: white !important;
}

.nav-cta:hover {
  background-color: #2563eb !important;
}

CSS for the Hamburger Button

.nav-toggle {
  display: none; /* hidden on desktop */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

CSS Media Query for Mobile

@media (max-width: 768px) {
  .nav-toggle {
    display: flex; /* show the hamburger */
  }

  .nav-menu {
    display: none; /* hide the menu by default */
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background-color: #1e293b;
    padding: 16px 0;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  .nav-menu.active {
    display: flex; /* show when the active class is added */
  }

  .nav-link {
    padding: 12px 24px;
    border-radius: 0;
    width: 100%;
  }

  .nav-link:hover {
    background-color: #334155;
  }
}

JavaScript to Toggle the Mobile Menu

<script>
const toggle = document.getElementById('navToggle');
const menu   = document.getElementById('navMenu');

toggle.addEventListener('click', function () {
  menu.classList.toggle('active');
});

/* Close the menu when a link is clicked */
document.querySelectorAll('.nav-link').forEach(function(link) {
  link.addEventListener('click', function () {
    menu.classList.remove('active');
  });
});

/* Close the menu when clicking outside the navbar */
document.addEventListener('click', function (e) {
  if (!e.target.closest('.navbar')) {
    menu.classList.remove('active');
  }
});
</script>

Animating the Hamburger into an X

Add a visual effect when the menu opens — the hamburger turns into an X icon:

.nav-toggle.active .hamburger:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active .hamburger:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active .hamburger:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

And update the JavaScript to also toggle the class on the button:

toggle.addEventListener('click', function () {
  menu.classList.toggle('active');
  toggle.classList.toggle('active');
});

Tips for Building a Good Navbar

• Use semantic <nav> and <ul> tags for accessibility and SEO.
• Add an aria-label to the hamburger button so screen readers understand its function.
• Use position: sticky so the navbar stays at the top while scrolling.
• Add an active-page indicator with an active class on the link being visited.
• Make sure the hamburger button's click area is large enough (at least 44×44px) for easy use on touch screens.

Conclusion

Building a responsive navbar with pure HTML and CSS is not as hard as you might think. The key is to start with a semantic HTML structure, apply Flexbox for the desktop layout, and use a media query for the mobile view with a hamburger menu. By adding a little JavaScript for the toggle, you already have a functional and professional navbar without any framework.