Pola: Header dan Navigation

Section Flexbox sudah membuat kita lancar merakit navbar sebagai komponen; sekarang kita menaikkannya satu tingkat menjadi header halaman utuh. Saat header menempel pada halaman penuh, dua persoalan baru muncul: latarnya harus melebar dari tepi ke tepi layar sementara isinya tetap terkendali lebar, dan baris header harus bertahan rapi ketika layar menyempit. Pada chapter ini kita susun resep header lengkap yang memadukan pola container dari awal section ini dengan flexbox dari section Flexbox.

Dua Lapis Header: Latar Penuh, Isi Terkendali #

Header halaman selalu terdiri dari dua lapis dengan tugas berbeda:

.header-halaman {
  background-color: #14503a;
  padding-block: 12px;
}

.header-isi {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}

Pemisahan dua lapis ini penting: bila warna latar diberikan pada elemen flex yang dibatasi max-width, pita warna ikut berhenti di tengah layar dan halaman terlihat seperti belum selesai. Pola “latar penuh di luar, isi terkendali di dalam” tidak hanya milik header — kita akan memakainya lagi pada hero dan footer.

Markup dan Resep Lengkap #

Struktur HTML-nya semantik: <header> membungkus semuanya, dan menu tetap berupa daftar di dalam <nav>:

<header class="header-halaman">
  <div class="header-isi">
    <a class="header-brand" href="#">Kedai Senja</a>
    <nav aria-label="Navigasi utama">
      <ul class="header-menu">
        <li><a class="header-tautan" href="#">Menu</a></li>
        <li><a class="header-tautan" href="#">Cerita</a></li>
        <li><a class="header-tautan" href="#">Kontak</a></li>
      </ul>
    </nav>
    <button class="header-aksi" type="button">Pesan</button>
  </div>
</header>

Lalu gaya untuk bagian-bagiannya:

.header-brand {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.header-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-tautan {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #d1e7dd;
  text-decoration: none;
}

.header-aksi {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  background-color: #f4fbf7;
  color: #14503a;
}

Mari kita telaah keputusan pentingnya:

1. .header-menu dengan reset margin dan padding: browser memberi <ul> margin dan padding-left bawaan; tanpa reset, menu tidak sejajar dengan brand.
2. flex-wrap: wrap pada menu: tautan boleh melipat ke baris kedua alih-alih meluber ketika ruang menipis.
3. .header-aksi dengan margin-left: auto: seluruh ruang sisa diserap sisi kiri tombol, sehingga aksi utama selalu menempel di ujung kanan baris — pola auto margin yang sama seperti pada chapter navbar.
4. aria-label pada <nav>: pembaca layar membedakan navigasi utama dari navigasi lain seperti footer.

Demo berikut merakit seluruh resep di atas. Perkecil lebar bingkai demo untuk melihat menu melipat ke baris baru:

Perilaku di Layar Sempit #

Menu tautan sudah siap melipat berkat flex-wrap; lapisan isinya pun bisa diikutkan:

@media (max-width: 560px) {
  .header-isi {
    flex-wrap: wrap;
  }
}

Strategi lipat sederhana ini layak untuk website konten. Untuk aplikasi dengan banyak menu, pendekatan hamburger dan drawer dibahas tuntas di chapter Responsive Navigation pada section Responsive Web Design; resep di sini cukup menjaga header tetap berfungsi di setiap ukuran.

Perlu dicatat pula apa yang tidak berubah saat header melipat: margin-left: auto pada tombol aksi tetap bekerja di baris mana pun tombolnya berada, karena margin auto selalu menyerap sisa ruang barisnya sendiri. Inilah alasan pola ini tahan banting — setiap item tahu tugasnya tanpa perlu aturan tambahan untuk setiap breakpoint.

Kesalahan Umum #

Ringkasan #

Header halaman dibangun dari dua lapis: lapisan latar yang melebar penuh dan lapisan isi berupa baris flex dalam centered container. flex-wrap menjaga baris tetap berfungsi di layar sempit, dan margin auto menempatkan aksi utama di ujung kanan. Pola berikutnya masih di area yang sama, tetapi dengan tanggung jawab yang jauh lebih besar: area hero yang menyambut pengunjung selebar layar.