Mengapa Menu Navbar dan Hamburger Saya Hilang pada Skrin yang Lebih Kecil?

Membetulkan Vanishing Navbar dan Menu Hamburger pada Skrin Lebih Kecil

Masalah:

Navbar dengan imej logo di tengah berfungsi dengan sempurna pada skrin besar. Walau bagaimanapun, apabila skrin dikurangkan, segala-galanya, termasuk imej logo dan menu hamburger, lenyap. Bagaimanakah isu ini boleh diselesaikan?

Penyelesaian:

Untuk mengekalkan keterlihatan pada skrin yang lebih kecil, pastikan bar navigasi mempunyai sama ada warna latar belakang atau kelas CSS yang sesuai ditambah:

• Untuk Bootstrap 5: Gunakan navbar-light atau navbar-dark bersama-sama dengan navbar-light bg-light atau navbar-dark bg-dark untuk warna latar belakang.

<nav>

• Untuk Bootstrap 4.0.0 dan lebih lama: Gunakan sama ada navbar-light bg-light atau navbar-dark bg-dark, atau tambahkan warna latar belakang tersuai melalui CSS.

<nav>

#navbar-primary .navbar-nav {
  background: #ededed;
}

Sebagai alternatif, anda boleh menggelapkan togol hamburger untuk meningkatkan keterlihatannya.

.navbar-toggle .icon-bar {
  background-color: rgb(136, 136, 136);
}

Maklumat Kemas Kini:

Untuk Bootstrap 5, kelas navbar-light atau navbar-dark adalah penting untuk memaparkan menu hamburger.

Atas ialah kandungan terperinci Mengapa Menu Navbar dan Hamburger Saya Hilang pada Skrin yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!