Cara Membuat Navbar Responsive dengan HTML dan CSS

Navigasi bar (navbar) adalah komponen paling penting di hampir setiap website. Membuat navbar yang responsive — tampil dengan baik di desktop maupun mobile — adalah skill wajib bagi frontend developer. Artikel ini memandu kamu membuat navbar responsive lengkap dengan hamburger menu untuk mobile, menggunakan HTML dan CSS murni tanpa library.

Struktur HTML Navbar

Pertama, buat struktur HTML yang semantik menggunakan tag <nav>:

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

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

    <!-- Tombol Hamburger (untuk 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">Beranda</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Tentang</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Layanan</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">Hubungi Kami</a>
      </li>
    </ul>

  </div>
</nav>

CSS untuk Navbar Desktop

Mulai dengan gaya dasar untuk tampilan desktop (mobile first, lalu expand ke 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;
}

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Navbar Responsive dengan HTML dan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.