Home Coding Cara Membuat Navbar Responsive Tanpa Ribet (HTML CSS)

Cara Membuat Navbar Responsive Tanpa Ribet (HTML CSS)

Farhan Hidayat 1 April 2026 4 min read

Masih bingung cara bikin navbar responsive yang simpel tapi tetap terlihat profesional? Tenang, kamu nggak perlu ribet pakai JavaScript dulu. Dengan HTML dan CSS saja, kamu sudah bisa bikin navbar yang rapi dan mobile friendly.

Di artikel ini, kita bakal bahas dari konsep sampai langsung praktik. Jadi, kamu nggak cuma paham, tapi juga bisa langsung pakai di project kamu.

Pertama, navbar adalah bagian paling sering dilihat pengunjung. Kalau tampilannya berantakan, orang bisa langsung keluar dari website kamu.

Selain itu, sekarang mayoritas pengguna membuka website lewat HP. Jadi, kalau navbar kamu tidak responsive, pengalaman pengguna pasti terganggu. Bahkan, Google juga lebih memprioritaskan website yang mobile friendly.

Also Read: 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet)

Sebelum mulai, kamu cukup siapkan dua hal sederhana. Pertama, text editor seperti VS Code. Kedua, browser untuk melihat hasilnya.

Setelah itu, pastikan kamu paham struktur dasar HTML seperti <nav>, <ul>, dan <li>. Tenang, kita bakal langsung praktik supaya lebih gampang dipahami.

Sekarang kita masuk ke bagian utama. Ikuti langkah ini pelan-pelan, ya.

Also Read: Roadmap Web Developer dari Nol hingga Bisa Ngoding dalam 3 Bulan

Pertama, kita buat kerangka navbar terlebih dahulu.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Responsive</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="navbar">
  <div class="logo">DayatDev</div>

  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-icon">☰</label>

  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

</body>
</html>

Pada bagian ini, kita membuat logo, menu, dan juga tombol hamburger. Selain itu, kita menggunakan checkbox untuk mengatur buka-tutup menu.

Selanjutnya, kita bikin tampilannya jadi lebih menarik.

Also Read: Cara Membuat Strongest Password Generator Python Sederhana

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #6a6ff5;
  padding: 15px 20px;
  color: white;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.menu li a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.menu li a:hover {
  opacity: 0.7;
}

Di sini, kita mengatur layout supaya navbar terlihat rapi dan modern. Selain itu, warna juga dibuat kontras agar mudah dibaca.

3. Menambahkan Efek Responsive

Nah, ini bagian penting dalam cara bikin navbar responsive. Kita gunakan media query agar tampilannya menyesuaikan layar.

.menu-icon {
  display: none;
  font-size: 25px;
  cursor: pointer;
}

#menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #6a6ff5;
    flex-direction: column;
    text-align: center;
    display: none;
  }

  .menu li {
    padding: 15px 0;
  }

  #menu-toggle:checked + .menu-icon + .menu {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

Dengan ini, saat layar mengecil, menu otomatis berubah jadi vertikal dan bisa dibuka lewat tombol hamburger.

Also Read: Cara Membuat Program Kasir Sederhana dengan Fitur Hitung Diskon

Setelah semua langkah di atas, navbar kamu akan terlihat horizontal di desktop. Sementara itu, di mobile, tampilannya berubah jadi menu hamburger yang lebih ringkas.

Hasilnya, website kamu jadi lebih rapi, modern, dan nyaman digunakan di semua device.

Walaupun terlihat simpel, masih banyak yang sering melakukan kesalahan. Misalnya, lupa menambahkan media query, sehingga navbar tidak berubah di HP.

Also Read: Baru Tahu? Ternyata Kalkulator Sederhana Python Bisa Dibuat dalam 5 Menit!

Selain itu, penggunaan ukuran font yang tidak konsisten juga bisa merusak tampilan. Bahkan, terlalu banyak menu juga sering bikin navbar jadi penuh dan tidak nyaman.

Supaya hasilnya lebih maksimal, ada beberapa hal yang bisa kamu lakukan. Pertama, gunakan desain yang simpel dan tidak berlebihan.

Selain itu, pastikan warna memiliki kontras yang jelas. Lalu, tambahkan efek hover agar interaksi terasa lebih hidup. Terakhir, selalu cek di berbagai ukuran layar sebelum dipublish.

Kesimpulan

Jadi, cara bikin navbar responsive itu sebenarnya cukup mudah kalau kamu sudah tahu konsep dasarnya. Dengan HTML dan CSS saja, kamu bisa membuat navbar yang terlihat profesional tanpa ribet.

Yang penting, kamu konsisten latihan dan terus eksplorasi desain. Semakin sering mencoba, hasilnya juga bakal semakin bagus. 🚀

Nggak sempat nulis tapi tetap mau website berkembang?
Tenang, semua bisa dibuat lebih cepat tanpa ribet.

👉 Mulai Pesan Artikel

Tagged with: