Cara Membuat Navbar Responsive HTML & CSS + Hamburger

Navigasi bar (navbar) adalah komponen paling penting di hampir setiap website. Membuat navbar yang responsive, yaitu 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, ditambah sedikit JavaScript untuk membuka dan menutup menu.

Di akhir artikel kamu akan punya satu file HTML utuh yang bisa langsung dicoba di browser, plus pemahaman kenapa setiap baris kodenya ada. Kita juga akan membahas hal yang sering dilewatkan tutorial lain: aksesibilitas (atribut aria-expanded, tombol Escape), indikator halaman aktif, animasi yang halus, dan kesalahan umum yang bikin menu mobile "tidak mau muncul". Kalau kamu masih baru dengan tag dan selector, ada baiknya membaca dulu dasar HTML untuk pemula dan CSS dasar.

Konsep Dasar: Bagaimana Navbar Responsive Bekerja

Sebelum menulis kode, pahami dulu cara kerjanya. Navbar responsive pada dasarnya punya dua "wujud" untuk satu struktur HTML yang sama:

• Wujud desktop: logo di kiri, deretan link di kanan dalam satu baris. Layout ini diatur dengan Flexbox (display: flex dan justify-content: space-between).
• Wujud mobile: layar terlalu sempit untuk menampung semua link, jadi link disembunyikan dan diganti tombol hamburger (ikon tiga garis). Saat tombol ditekan, menu muncul bertumpuk secara vertikal.

Perpindahan antara dua wujud itu dilakukan oleh media query, yaitu aturan CSS yang hanya berlaku pada lebar layar tertentu. Sedangkan JavaScript hanya punya satu tugas sederhana: menambah atau menghapus sebuah class (di artikel ini namanya aktif) ketika tombol hamburger diklik. CSS yang menentukan seperti apa tampilan menu saat class itu ada. Pembagian peran ini penting: logika tampilan tetap di CSS, JavaScript cukup jadi "saklar".

Satu hal lagi yang wajib ada agar media query bekerja di HP adalah meta viewport di dalam <head>. Tanpa baris ini, browser mobile akan merender halaman seolah layarnya selebar desktop (sekitar 980px) lalu mengecilkannya, sehingga media query max-width: 768px tidak pernah aktif:

<meta name="viewport" content="width=device-width, initial-scale=1">

Struktur HTML Navbar

Pertama, buat struktur HTML yang semantik menggunakan tag <nav>. Tag ini memberi tahu browser, mesin pencari, dan screen reader bahwa blok tersebut adalah navigasi utama. Daftar link dibungkus <ul> karena secara makna memang sebuah daftar.

<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"
            aria-expanded="false" aria-controls="navMenu">
      <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>

Beberapa detail yang perlu diperhatikan. Tombol hamburger memakai elemen <button>, bukan <div>, supaya otomatis bisa difokus dengan keyboard (Tab) dan ditekan dengan Enter atau Spasi. Atribut aria-expanded memberi tahu pengguna screen reader apakah menu sedang terbuka atau tertutup, dan aria-controls menunjuk ke id elemen menu yang dikendalikan. Nilai aria-expanded nanti kita ubah lewat JavaScript.

CSS untuk Navbar Desktop

Kode di bawah ini memakai pendekatan desktop first: gaya dasar ditulis untuk layar lebar, lalu media query max-width menimpanya untuk layar kecil. Pendekatan sebaliknya (mobile first) dibahas di bagian tersendiri setelah ini.

* {
  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;
}

Kuncinya ada di .nav-container: display: flex membuat logo, tombol, dan menu berjajar dalam satu baris, justify-content: space-between mendorong logo ke kiri dan menu ke kanan, sedangkan align-items: center membuat semuanya rata tengah secara vertikal. Properti gap pada .nav-menu memberi jarak antar link tanpa perlu margin satu per satu. position: sticky dengan top: 0 membuat navbar menempel di atas saat halaman di-scroll, dan z-index: 100 memastikan navbar tidak tertutup konten lain.

CSS untuk Hamburger Button

Tombol hamburger disusun dari tiga <span> berbentuk garis tipis. Di desktop tombol ini disembunyikan dengan display: none.

.nav-toggle {
  display: none; /* disembunyikan di 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;
}

Perhatikan angkanya: tinggi garis 2px dan jarak antar garis 5px. Artinya pusat garis pertama berjarak 7px dari pusat garis kedua. Angka 7px inilah yang nanti dipakai pada animasi hamburger menjadi X, jadi kalau kamu mengubah gap atau height, angka translateY juga harus ikut disesuaikan.

CSS Media Query untuk Mobile

Di layar 768px ke bawah, tombol hamburger dimunculkan, sedangkan menu disembunyikan dan diubah menjadi panel vertikal yang muncul tepat di bawah navbar.

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

  .nav-menu {
    display: none; /* sembunyikan menu default */
    flex-direction: column;
    align-items: stretch; /* item selebar menu, bukan rata tengah */
    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.aktif {
    display: flex; /* tampilkan saat kelas aktif ditambahkan */
  }

  .nav-link {
    display: block; /* agar width dan area klik penuh satu baris */
    padding: 12px 24px;
    border-radius: 0;
    width: 100%;
  }

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

Dua baris yang saya tambahkan dibanding versi awal artikel ini adalah align-items: stretch dan display: block pada .nav-link. Tanpa keduanya, aturan align-items: center dari versi desktop masih terbawa sehingga item menu menyempit dan rata tengah, dan width: 100% pada elemen <a> tidak berpengaruh karena <a> secara default adalah elemen inline. Hasilnya, area yang bisa diklik hanya sebesar teksnya, bukan satu baris penuh.

Menu bisa diposisikan absolute dengan top: 64px karena induknya, .navbar, punya position: sticky. Elemen sticky dihitung sebagai elemen yang "positioned", jadi koordinat menu dihitung dari navbar, bukan dari halaman.

JavaScript untuk Toggle Menu Mobile

JavaScript di sini sengaja dibuat minimal. Taruh script ini tepat sebelum tag </body> agar elemen navbar sudah ada saat script dijalankan.

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

function tutupMenu() {
  menu.classList.remove('aktif');
  toggle.classList.remove('aktif');
  toggle.setAttribute('aria-expanded', 'false');
}

toggle.addEventListener('click', function () {
  const terbuka = menu.classList.toggle('aktif');
  toggle.classList.toggle('aktif', terbuka);
  toggle.setAttribute('aria-expanded', String(terbuka));
});

/* Tutup menu saat link diklik */
document.querySelectorAll('.nav-link').forEach(function (link) {
  link.addEventListener('click', tutupMenu);
});

/* Tutup menu saat klik di luar navbar */
document.addEventListener('click', function (e) {
  if (!e.target.closest('.navbar')) {
    tutupMenu();
  }
});

/* Tutup menu dengan tombol Escape */
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') {
    tutupMenu();
  }
});
</script>

Method classList.toggle() mengembalikan true jika class baru saja ditambahkan dan false jika dihapus, sehingga nilai itu bisa langsung dipakai untuk mengisi aria-expanded. Fungsi tutupMenu() dipakai bersama oleh tiga kejadian: klik link, klik di luar navbar, dan tekan Escape. Dengan begitu, class pada tombol dan menu selalu sinkron. Kalau kamu ingin memperdalam event listener dan manipulasi DOM, baca JavaScript dasar untuk pemula.

Animasi Hamburger Menjadi X

Tambahkan efek visual saat menu terbuka: hamburger berubah menjadi ikon X. Garis pertama turun 7px lalu diputar 45 derajat, garis kedua dihilangkan, dan garis ketiga naik 7px lalu diputar -45 derajat.

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

Dan update JavaScript untuk juga toggle kelas pada tombol. Versi sederhananya seperti ini (pada script lengkap di atas, baris ini sudah termasuk):

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

Urutan fungsi di dalam transform berpengaruh. translateY(7px) rotate(45deg) artinya geser dulu baru putar terhadap titik tengahnya sendiri, sehingga dua garis bertemu tepat di tengah. Kalau urutannya dibalik, arah geser ikut berputar dan X-nya jadi miring tidak simetris.

Membuat Menu Muncul dengan Animasi Halus

Properti display tidak bisa dianimasikan dengan transition biasa, jadi menu dengan display: none akan muncul secara tiba-tiba. Jika ingin efek slide, ganti cara menyembunyikannya dengan kombinasi transform, opacity, dan visibility. Ganti blok .nav-menu dan .nav-menu.aktif di dalam media query dengan versi berikut:

@media (max-width: 768px) {
  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    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);

    /* kondisi tertutup */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .nav-menu.aktif {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Hormati pengguna yang mematikan animasi di sistem operasinya */
@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .hamburger {
    transition: none;
  }
}

visibility: hidden di sini penting. Kalau hanya memakai opacity: 0, menu memang tidak terlihat, tetapi link di dalamnya masih bisa diklik dan masih bisa difokus dengan Tab. visibility: hidden membuat elemen benar-benar tidak bisa diinteraksi, dan karena visibility termasuk properti yang bisa di-transition, perubahannya tetap terlihat mulus.

Menandai Halaman Aktif

Pengunjung perlu tahu sedang berada di halaman mana. Cara yang benar secara aksesibilitas adalah memakai atribut aria-current="page" pada link halaman yang sedang dibuka, lalu menata tampilannya lewat selector atribut. Dengan begitu kamu tidak perlu class tambahan, dan screen reader ikut membacakan bahwa link itu adalah halaman saat ini.

<li class="nav-item">
  <a href="/blog" class="nav-link" aria-current="page">Blog</a>
</li>

.nav-link[aria-current="page"] {
  color: white;
  background-color: #334155;
  font-weight: 600;
}

Di website statis kamu menulis atribut ini manual di setiap file. Di aplikasi berbasis template (misalnya Blade di Laravel atau PHP biasa), atribut ini biasanya dicetak secara kondisional berdasarkan URL yang sedang diakses.

Versi Mobile First (Alternatif)

Banyak developer lebih suka menulis gaya mobile sebagai dasar, lalu menambah gaya desktop memakai min-width. Keuntungannya, CSS untuk layar kecil jadi lebih ringkas dan tidak perlu "membatalkan" aturan desktop. Kedua pendekatan menghasilkan tampilan yang sama, pilih saja salah satu dan konsisten. Berikut inti versinya:

/* Dasar: mobile */
.nav-toggle { display: flex; }

.nav-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  list-style: none;
  background-color: #1e293b;
  padding: 16px 0;
}

.nav-menu.aktif { display: flex; }

.nav-link {
  display: block;
  padding: 12px 24px;
  color: #cbd5e1;
  text-decoration: none;
}

/* Desktop: 769px ke atas */
@media (min-width: 769px) {
  .nav-toggle { display: none; }

  .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    width: auto;
    padding: 0;
    gap: 8px;
    background: none;
  }

  .nav-link {
    padding: 8px 16px;
    border-radius: 6px;
  }
}

Perhatikan position: static di versi desktop. Tanpa itu, menu tetap absolute dan akan menumpuk di bawah navbar walaupun sudah tampil dalam satu baris.

Kode Lengkap Siap Pakai

Berikut semua bagian di atas digabung menjadi satu file. Simpan sebagai index.html, buka di browser, lalu perkecil jendela atau gunakan mode responsive di DevTools (Ctrl+Shift+M di Chrome) untuk melihat perubahannya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navbar Responsive</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #f1f5f9; }

    .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,
    .nav-link[aria-current="page"] { background-color: #334155; color: white; }
    .nav-cta { background-color: #3b82f6; color: white !important; }
    .nav-cta:hover { background-color: #2563eb !important; }

    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
    }
    .hamburger {
      display: block;
      width: 24px;
      height: 2px;
      background-color: white;
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .nav-toggle.aktif .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.aktif .hamburger:nth-child(2) { opacity: 0; }
    .nav-toggle.aktif .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 768px) {
      .nav-toggle { display: flex; }
      .nav-menu {
        flex-direction: column;
        align-items: stretch;
        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);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
      }
      .nav-menu.aktif { opacity: 1; visibility: visible; transform: translateY(0); }
      .nav-link { display: block; padding: 12px 24px; border-radius: 0; width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-menu, .hamburger { transition: none; }
    }

    main { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
  </style>
</head>
<body>

  <nav class="navbar">
    <div class="nav-container">
      <a href="#" class="nav-logo">MyBrand</a>

      <button class="nav-toggle" id="navToggle" aria-label="Toggle menu"
              aria-expanded="false" aria-controls="navMenu">
        <span class="hamburger"></span>
        <span class="hamburger"></span>
        <span class="hamburger"></span>
      </button>

      <ul class="nav-menu" id="navMenu">
        <li class="nav-item"><a href="#" class="nav-link" aria-current="page">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>

  <main>
    <h1>Halo!</h1>
    <p>Perkecil jendela browser untuk melihat hamburger menu.</p>
  </main>

  <script>
    const toggle = document.getElementById('navToggle');
    const menu   = document.getElementById('navMenu');
    const mobile = window.matchMedia('(max-width: 768px)');

    function tutupMenu() {
      menu.classList.remove('aktif');
      toggle.classList.remove('aktif');
      toggle.setAttribute('aria-expanded', 'false');
    }

    toggle.addEventListener('click', function () {
      const terbuka = menu.classList.toggle('aktif');
      toggle.classList.toggle('aktif', terbuka);
      toggle.setAttribute('aria-expanded', String(terbuka));
    });

    document.querySelectorAll('.nav-link').forEach(function (link) {
      link.addEventListener('click', tutupMenu);
    });

    document.addEventListener('click', function (e) {
      if (!e.target.closest('.navbar')) tutupMenu();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') tutupMenu();
    });

    /* Reset saat layar diperlebar ke ukuran desktop */
    mobile.addEventListener('change', function (e) {
      if (!e.matches) tutupMenu();
    });
  </script>
</body>
</html>

Ada satu tambahan di versi lengkap ini: window.matchMedia() dengan event change. Event ini terpicu saat lebar layar melewati batas 768px. Jika pengguna membuka menu di layar kecil lalu memutar tablet ke mode landscape sehingga layar menjadi lebar, menu otomatis di-reset ke kondisi tertutup dan ikon X kembali menjadi hamburger. Padding tombol hamburger juga dinaikkan menjadi 10px agar area sentuhnya sekitar 44x44px.

Kesalahan Umum dan Solusinya

Alternatif: Hamburger Menu Tanpa JavaScript

Kamu mungkin pernah melihat teknik "checkbox hack": sebuah <input type="checkbox"> tersembunyi dan <label> sebagai tombol, lalu selector :checked ~ .nav-menu dipakai untuk menampilkan menu. Teknik ini memang bekerja tanpa satu baris JavaScript pun. Namun dari sisi aksesibilitas kurang ideal: screen reader membacanya sebagai checkbox, bukan tombol menu, dan perilaku seperti menutup dengan Escape atau saat link diklik tetap butuh JavaScript. Untuk website produksi, pendekatan tombol plus script kecil seperti di artikel ini lebih disarankan. JavaScript yang dipakai pun sangat ringan, jadi tidak berpengaruh berarti pada kecepatan halaman.

Tips Membuat Navbar yang Baik

• Gunakan tag semantik <nav> dan <ul> untuk aksesibilitas dan SEO.
• Tambahkan aria-label pada tombol hamburger agar screen reader memahami fungsinya, dan perbarui aria-expanded setiap kali menu dibuka atau ditutup.
• Gunakan position: sticky agar navbar menempel di atas saat scroll.
• Tambahkan indikator halaman aktif pada link yang sedang dikunjungi, sebaiknya dengan aria-current="page" (atau kelas active jika kamu lebih suka).
• Pastikan area klik tombol hamburger cukup besar (minimal 44x44px) untuk kemudahan di layar sentuh.
• Jangan menghapus outline fokus (outline: none) tanpa pengganti. Pengguna keyboard butuh tanda link mana yang sedang difokus. Gunakan :focus-visible untuk memberi gaya fokus yang rapi.
• Batasi jumlah link utama. Lima sampai tujuh item biasanya sudah cukup; sisanya bisa dipindah ke footer atau submenu.
• Uji di perangkat asli, bukan hanya di DevTools, karena perilaku sentuh dan tinggi layar HP bisa berbeda.

Membangun komponen seperti navbar adalah latihan bagus untuk menguasai Flexbox, media query, dan DOM sekaligus. Kalau kamu sedang menyusun jalur belajar, lihat juga roadmap frontend developer dari nol untuk mengetahui materi apa yang sebaiknya dipelajari setelah ini.

Kesimpulan

Membuat navbar responsive dengan HTML dan CSS murni tidak sesulit yang dibayangkan. Kuncinya adalah memulai dengan struktur HTML yang semantik, menerapkan Flexbox untuk layout desktop, dan menggunakan media query untuk tampilan mobile dengan hamburger menu. Dengan menambahkan sedikit JavaScript untuk toggle, kamu sudah memiliki navbar yang fungsional dan profesional tanpa perlu framework apapun. Lengkapi dengan aria-expanded, penutupan lewat Escape, dan indikator halaman aktif, maka navbar kamu tidak hanya cantik tetapi juga nyaman dipakai semua orang.

FAQ

Berapa breakpoint yang tepat untuk navbar responsive?

Tidak ada angka wajib. 768px umum dipakai karena kira-kira lebar tablet potret, tetapi breakpoint terbaik adalah titik saat menu mulai tidak muat. Cara praktisnya: perkecil jendela browser pelan-pelan dan catat lebar ketika link mulai berdesakan atau turun ke baris baru, lalu jadikan angka itu breakpoint.

Apakah navbar responsive bisa dibuat tanpa JavaScript sama sekali?

Bisa, dengan teknik checkbox hack atau elemen <details>. Tetapi untuk hasil yang aksesibel, termasuk aria-expanded, tutup dengan Escape, dan tutup saat link diklik, kamu tetap butuh JavaScript. Script-nya hanya belasan baris, jadi tidak perlu dihindari.

Kenapa menu mobile saya tidak muncul saat hamburger diklik?

Penyebab paling sering ada tiga: script dijalankan sebelum elemen HTML dimuat, id di JavaScript tidak sama dengan id di HTML (ingat, huruf besar dan kecil dibedakan), atau nama class di JavaScript berbeda dengan di CSS (misalnya active di JS tetapi .aktif di CSS). Buka Console di DevTools untuk melihat pesan error.

Lebih baik pakai Flexbox atau Grid untuk navbar?

Untuk navbar yang isinya satu baris, Flexbox lebih cocok karena memang dirancang untuk tata letak satu dimensi. Grid lebih berguna untuk layout dua dimensi, misalnya mega menu dengan beberapa kolom. Keduanya bisa dikombinasikan.

Bagaimana cara membuat navbar ini di Bootstrap atau Tailwind?

Bootstrap sudah menyediakan komponen navbar dengan hamburger bawaan, dan Tailwind memakai utility class seperti flex, hidden, dan md:flex dengan prinsip yang sama. Memahami versi HTML dan CSS murni seperti di artikel ini akan memudahkan kamu memodifikasi dan memperbaiki navbar di framework apa pun.