Responsive Navbar with HTML & CSS

A responsive navigation bar is essential for modern websites. Here’s a minimal example that adapts to mobile and desktop.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Navbar</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    nav { display: flex; justify-content: space-between; background: #333; color: white; padding: 10px; }
    ul { list-style: none; display: flex; margin: 0; padding: 0; }
    li { margin: 0 10px; }
    a { color: white; text-decoration: none; }
    @media (max-width: 600px) {
      ul { flex-direction: column; display: none; }
      ul.show { display: flex; }
    }
  </style>
</head>
<body>
  <nav>
    <div>Logo</div>
    <button onclick="menu.classList.toggle('show')">☰</button>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Flexbox arranges items horizontally.
On small screens, the menu collapses into a button.
Clicking toggles the mobile menu.

Responsive Navbar with HTML & CSS

Comments