Rumah hujung hadapan web tutorial css Mengapa Menu Navbar dan Hamburger Saya Hilang pada Skrin yang Lebih Kecil?

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

Nov 14, 2024 pm 09:38 PM

Why Does My Navbar and Hamburger Menu Disappear on Smaller Screens?

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Stock Market GPT

Stock Market GPT

Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara Membuat Kesan Glassmorfisme Dengan CSS Cara Membuat Kesan Glassmorfisme Dengan CSS Aug 22, 2025 am 07:54 AM

Untuk membuat kesan meniru kaca CSS, anda perlu menggunakan penapis latar belakang untuk mencapai latar belakang kabur, menetapkan latar belakang lut seperti RGBA (255,255,255,0.1), tambah sempadan halus dan bayang-bayang untuk meningkatkan rasa hierarki, dan pastikan terdapat kandungan visual yang cukup di belakang unsur-unsur; 1. Gunakan penapis latar belakang: blur (10px) untuk mengaburkan kandungan latar belakang; 2. Gunakan RGBA atau HSLA untuk menentukan latar belakang telus untuk mengawal tahap ketelusan; 3. Tambah 1PxSolidrgba (255,255,255,0.3) sempadan dan bayang-bayang kotak untuk meningkatkan tiga dimensi; 4. Pastikan bekas mempunyai latar belakang yang kaya seperti gambar atau tekstur untuk membentangkan kesan penembusan kabur; 5. Ia serasi dengan pelayar lama

Cara membuat sempadan bertitik di CSS Cara membuat sempadan bertitik di CSS Aug 15, 2025 am 04:56 AM

Gunakan CSS untuk membuat sempadan bertitik, hanya tetapkan atribut sempadan untuk bertitik. Sebagai contoh, "Sempadan: 3PXDotted#000" boleh menambah sempadan titik hitam 3-pixel ke elemen. Dengan menyesuaikan lebar sempadan, saiz titik boleh diubah. Sempadan yang lebih luas menghasilkan mata yang lebih besar. Anda boleh menetapkan sempadan bertitik untuk sisi tertentu, seperti "Border-top: 2PxDotteded". Sempadan bertitik sesuai untuk elemen peringkat blok seperti div dan input. Mereka sering digunakan dalam keadaan fokus atau kawasan yang boleh diedit untuk meningkatkan kebolehcapaian. Perhatikan kontras warna. Pada masa yang sama, berbeza dengan gaya garis pendek Dashed, bertitik membentangkan bentuk titik bulat. Ciri ini digunakan secara meluas dalam semua pelayar arus perdana.

Cara membuat garis menegak dengan CSS Cara membuat garis menegak dengan CSS Aug 11, 2025 pm 12:49 PM

Gunakan div dengan sempadan untuk membuat garis menegak dengan cepat, dan tentukan gaya dan ketinggian dengan menetapkan sempadan dan ketinggian; 2. Penggunaan :: Sebelum atau :: Selepas elemen pseudo untuk menambah garis menegak tanpa tag HTML tambahan, sesuai untuk pemisahan hiasan; 3. Dalam susun atur Flexbox, dengan menetapkan warna lebar dan latar belakang kelas pembahagi, pembahagi menegak adaptif antara bekas elastik dapat dicapai; 4. Dalam cssgrid, masukkan garis menegak sebagai lajur bebas (seperti lajur autowidth) ke dalam susun atur grid, yang sesuai untuk reka bentuk responsif; Kaedah yang paling sesuai harus dipilih mengikut susun atur khusus untuk memastikan strukturnya mudah dan mudah dijaga.

Cara menukar gaya senarai dalam css Cara menukar gaya senarai dalam css Aug 17, 2025 am 10:04 AM

Untuk menukar gaya senarai CSS, gunakan jenis gaya pertama untuk menukar gaya peluru atau penomboran. 1. Gunakan jenis gaya senarai untuk menetapkan peluru UL ke cakera, bulatan atau persegi, dan bilangan OL adalah perpuluhan, rendah alpha, atas-alpha, rendah-Rom atau atas-Rom. 2. Keluarkan tag sepenuhnya dengan gaya senarai: Tiada. 3. Gunakan senarai gaya senarai: URL ('Bullet.png') untuk menggantikannya dengan imej tersuai. 4. Gunakan senarai gaya senarai: dalam

Cara menggunakan harta penapis di CSS Cara menggunakan harta penapis di CSS Aug 11, 2025 pm 05:29 PM

Thecssfilterpropertyallowsvisualeffectslebur, kecerahan, andgrayscaletobeapplieddirectlytoHtmlelements.1) usethesyntaxfilter: filter-function (nilai) toapplyeffect.2) combinemultipleFileSwithswithswith, E.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.

Cara Melaksanakan Tema Mod Gelap dengan CSS Cara Melaksanakan Tema Mod Gelap dengan CSS Aug 22, 2025 am 09:55 AM

Terdapat dua cara utama untuk melaksanakan Mod Gelap: Satu adalah dengan menggunakan media yang lebih suka warna-skema untuk menanyakan secara automatik untuk menyesuaikan keutamaan sistem, dan yang lain adalah untuk menambah fungsi pensuisan manual melalui JavaScript. 1. Gunakan lebih suka skema-skema untuk menggunakan tema gelap secara automatik mengikut sistem pengguna. Tidak ada keperluan untuk JavaScript, hanya menentukan gaya dalam pertanyaan media; 2. 3. Anda boleh menggabungkan kedua -duanya untuk membaca Localst Pertama apabila halaman dimuatkan.

Cara Menggunakan GRID-Template-areas di CSS Cara Menggunakan GRID-Template-areas di CSS Aug 22, 2025 am 07:56 AM

Thegrid-template-areaspropertyallowsdeveloperstercreateintuitive, readableLelayoutsbydefiningnamedgridareas; eachstringRepresentowandeachwordacolumncell, withgrid-areanamesonchildelementsmatchingthoseIntHetHetPlate, sedemikian "headerheaderererheaderererheadererheadererheadererheadererheadererheadererheadererheadererheadererheaderheaderheadererheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader."

Cara menukar kursor dalam CSS Cara menukar kursor dalam CSS Aug 16, 2025 am 05:00 AM

UseBuilt-IncursortypesLikePointer, Bantuan, Ornot-AllowedtoprovideimmediatevisualFeedBackFordifferentInteractivements.2.applycustomcursorimageswithTheCursorPropertyuseSaurl, OptionallySpecyfyLySpotandingLudinglikeAtoToAllik.

See all articles