📱 Responsive Navbar with Mobile Menu

Live demo is above ⬆️ Resize your browser or open on mobile to see the hamburger menu.

📖 Complete Code

<!-- HTML -->
<nav class="navbar">
  <div class="nav-container">
    <a href="#" class="logo">Logo</a>
    <button class="hamburger">
      <span></span><span></span><span></span>
    </button>
    <ul class="nav-menu">
      <li><a href="#">Home</a></li>
    </ul>
  </div>
</nav>

<!-- CSS (add to <style>) -->
.navbar { background: #1e293b; padding: 1rem 2rem; }
.nav-menu { display: flex; gap: 2rem; list-style: none; }
.hamburger { display: none; }
@media (max-width: 768px) {
  .hamburger { display: block; }
  .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; transition: 0.3s; }
  .nav-menu.active { left: 0; }
}

<!-- JavaScript -->
document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-menu').classList.toggle('active');
});

← Back to Home