twitter bootstrap navbar memperbaiki situs tumpang tindih teratas

347

Saya menggunakan bootstrap di situs saya dan saya mengalami masalah dengan navbar fixed top. Ketika saya hanya menggunakan navbar biasa, semuanya baik-baik saja. Namun, ketika saya mencoba untuk beralih ke navbar fixed top, semua konten lain di situs bergeser seperti navbar tidak ada dan navbar tumpang tindih. ini pada dasarnya bagaimana saya menjelaskannya:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

saya mencoba untuk menyalin contoh bootstraps dengan tepat tetapi masih memiliki masalah ini hanya ketika menggunakan navbar fixed top. apa yang saya lakukan salah?

html twitter-bootstrap Matthew Berman
sumber

Jawaban:

527

Jawaban Anda benar dalam dokumen :

Padding tubuh diperlukan

Navbar tetap akan overlay konten Anda yang lain, kecuali jika Anda menambahkan paddingke bagian atas <body>. Coba nilai Anda sendiri atau gunakan cuplikan kami di bawah ini. Tip: Secara default, navbar adalah 50px tinggi.

body { padding-top: 70px; }

Pastikan untuk memasukkan ini setelah inti Bootstrap CSS.

dan dalam Bootstrap 4 docs ...

Fixed navbars menggunakan posisi: fix, artinya mereka ditarik dari aliran normal DOM dan mungkin memerlukan CSS khusus (misalnya, padding-top pada) untuk mencegah tumpang tindih dengan elemen lain.

rfunduk
sumber
16
Tetapi ketika Anda meminimalkan jendela navbar muncul setelah 40px bagaimana saya harus menanganinya ..
Aravindhan
5
Itu muncul setelah 40px mungkin karena Anda tidak "menambahkan ini setelah inti Bootstrap CSS dan sebelum CSS responsif opsional."
collimarco
1
Jawaban ini benar, tetapi itu hanya bekerja dengan baik ketika Anda membuat padding 40px menjadi gaya responsif, lihat jawaban Dan atau Nick.
Tony Bathgate
1
Lihat jawaban dari @ qub1n jika Anda tidak ingin menambahkan padding (atau apa pun).
scharfmn
2
@JerSchneid Contoh untuk navbar-fixed-top di w3schools.com menunjukkan perilaku yang sama. Saya cenderung menyebutnya bug.
Tony Martin
125

Seperti yang orang lain katakan menambahkan padding-top pada bodi sangat bagus. Tetapi ketika Anda membuat layar lebih sempit (untuk lebar ponsel) ada celah antara navbar dan tubuh. Juga, navbar yang penuh sesak dapat membungkus ke baris multi-baris, menimpa beberapa konten lagi.

Ini memecahkan masalah semacam ini bagi saya

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

Ini membuat padding 40px secara default dan 0px ketika di bawah lebar 768px (yang menurut bootstrap's docs adalah cutoff layout ponsel di mana celah akan dibuat)

Nick Bisby
sumber
1
Apakah solusi ini juga masuk antara CSS Bootstrap inti dan impor CSS responsif? Saya masih melihat celah ketika lebar jendela kurang dari 980. Saya menduga impor kemudian menimpa CSS responsif. Jika saya memindahkan solusi ini di bawah impor CSS responsif, maka saya masih mendapatkan body padding, ditambah garis tambahan di bilah menu.
slothbear
Saya menggunakan Twitter Bootstrap 2.3.2. Saya perhatikan dokumen tidak lagi berisi saran 40px, meskipun kebutuhan masih ada.
slothbear
1
Eh, saran 40px masih ada, itu baru saja dipindahkan. Maaf atas komentar spam.
slothbear
3
oleh Bootstrap 3. + body { padding-top: 40px; }sudah cukup
andilabs
8
Solusi ini ada di jalur yang benar. Cukup dengan memasang bantalan dalam tubuh, seperti yang didokumentasikan, tidak cukup, bahkan pada 3. +. Dengan kombinasi yang tepat dari kueri media, efek yang diinginkan dapat dicapai saat navbar membungkus dengan pengubahan ukuran browser. Dalam kasus saya, saya perlu mengubah bantalan di 1148px, 900px, dan lebar 768px.
John McCann
34

solusi yang jauh lebih berguna untuk referensi Anda, ini berfungsi sempurna di semua proyek saya:

ubah baris pertama Anda dari

.navbar.navbar-fixed-top

untuk

.navbar.navbar-default.navbar-static-top
seperti kucing
sumber
1
apakah kamu hanya trolling? atau apakah saya mengawasi sesuatu?
chyno
Bagaimana ini mendapatkan 10 upvotes? navbar-default hanya menambahkan warna dan warna latar belakang ...
Denny Mueller
2
navbar-static-top adalah perubahan dan itu berhasil untuk saya. Terima kasih!
kevthanewversi
1
navbar-static-top memperbaikinya untuk saya juga. Paling tidak mengganggu.
xpagesbeast
3
Ini berfungsi jika Anda tidak perlu navbar untuk selalu terlihat di atas layar. Navbar-static-top tidak diperbaiki, ia bergulir dengan layar. Ini mencontohkan gaya navbar yang berbeda: getbootstrap.com/docs/3.3/examples/navbar-static-top
Victor Ionescu
26

Masalah ini diketahui dan ada solusinya di situs bootstrap twitter:

Saat Anda memasang navbar, ingat untuk memperhitungkan area tersembunyi di bawahnya. Tambahkan 40px atau lebih padding ke <body>. Pastikan untuk menambahkan ini setelah CSS Bootstrap inti dan sebelum CSS responsif opsional.

Ini bekerja untuk saya:

body { padding-top: 40px; }
davidrac
sumber
9
Tetapi ketika Anda meminimalkan jendela navbar muncul setelah 40px bagaimana saya harus menanganinya ..
Aravindhan
1
ya, solusi ini tidak berfungsi dengan baik pada ukuran layar seluler. Bahkan dalam mode layar lebar pada ponsel saya pada dasarnya membuat situs tidak berguna.
Tony Bathgate
apa opsional CSS responsif? Saya hanya pernah menggunakan satu CSS bootstrap (inti) - Saya berbicara di atas versi 3.7.x KEUNGGULAN; apakah itu terbagi dalam CSS yang berbeda sebelum versi 3.7.x?
joedotnot
26

@Ryan, Anda benar, mengkodekan tinggi akan membuatnya berfungsi buruk jika ada navbar khusus. Ini adalah kode yang saya gunakan untuk BS 3.0.0 dengan senang hati:

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});
Aram Paronikyan
sumber
3
Alih-alih menggunakan parseIntnilai css dari ketinggian, saya hanya menggunakan $('#main-navbar').height(), tapi selain itu ini sangat membantu dan menyelesaikan masalah saya, terima kasih.
tylerwal
Kecuali navbar Anda adalah ketinggian tetap, inilah yang Anda butuhkan.
CraigP
21

Saya meletakkan ini di depan wadah hasil:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

Saya suka pendekatan ini karena ini mendokumentasikan peretasan yang diperlukan untuk membuatnya berfungsi, plus itu juga berfungsi untuk mobile nav.

EDIT - ini bekerja lebih baik:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
Dan
sumber
16

Masalahnya adalah dengan navbar-fix-top, yang akan melapisi konten Anda kecuali menentukan body-padding. Tidak ada solusi yang disediakan di sini berfungsi dalam 100% kasus. Solusi JQuery berkedip / menggeser halaman setelah halaman dimuat, yang terlihat aneh.

Solusi nyata bagi saya adalah tidak menggunakan navbar-fix-top, tetapi navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
Tomas Kubes
sumber
1
Ya, itu lebih baik, karena bantalan tubuh dinamis untuk setiap ukuran layar, solusinya tidak baik.
Ronen Festinger
Tapi kemudian ada strip ruang putih kosong di atas navbar.
user2075599
16

Seperti yang telah saya posting di pertanyaan yang sama, saya sudah sukses dengan membuat bar nav tetap non-tepat tepat sebelum bar nav tetap nyata saya.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

Spasi bekerja dengan baik pada semua ukuran layar.

Jason Butler
sumber
Inilah yang kami lakukan .. menempatkan konten tubuh tepat di tempat yang benar tanpa kode js, menebak atau apa pun. .
FredArters
1
Thid layak mendapatkan lebih banyak upvotes, Bekerja dengan sangat baik, jelek sekali tetapi hanya kode: D
JRsz
Terima kasih, ini adalah solusi yang jauh lebih elegan daripada bantalan atas atau piksel tepi dan lainnya ...
Pedro Reis
3
Sayangnya ini tidak berfungsi untuk seluler, ketika navs masuk ke dalam 1 kolom.
Pedro Reis
16

Solusi untuk Bootstrap 4, ini berfungsi sempurna di semua proyek saya:

ubah baris pertama Anda dari

navbar-fixed-top

untuk

sticky-top

Referensi dokumentasi bootstrap

Sudah waktunya mereka melakukan ini dengan benar: D

Rick
sumber
Beberapa orang mungkin menggunakan fixed-top untuk melihat tautan saat Anda menggulir ke bawah halaman; meskipun fitur ini bisa berguna jika Anda tidak peduli tentang itu :)
knowledge_is_power
Perhatikan juga bahwa .sticky-top menggunakan posisi: sticky, yang tidak sepenuhnya didukung di setiap browser.
live-love
14

Semua solusi sebelumnya hard-code 40 piksel khusus ke html atau CSS dalam satu atau lain cara. Bagaimana jika navbar berisi ukuran font atau gambar yang berbeda? Bagaimana jika saya punya alasan kuat untuk tidak mengacaukan bantalan tubuh ? Saya telah mencari solusi untuk masalah ini, dan inilah yang saya temukan:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

Anda dapat memindahkannya ke atas atau ke bawah dengan menyesuaikan '1'. Tampaknya bekerja untuk saya terlepas dari ukuran konten di navbar, sebelum dan sesudah mengubah ukuran.

Saya ingin tahu apa yang orang lain pikirkan tentang ini: tolong bagikan pemikiran Anda. (Ini akan di refactored agar tidak diulang, btw.) Selain menggunakan jQuery, adakah alasan lain untuk tidak mendekati masalah dengan cara ini? Saya bahkan sudah membuatnya bekerja dengan navbar sekunder seperti ini:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Di atas ada di Bootstrap 2.3.2 - apakah akan bekerja di 3.x Selama nama kelas generik tetap ... pada kenyataannya, itu harus bekerja independen dari bootstrap, kan?

EDIT: Ini adalah fungsi jquery lengkap yang menangani dua navar tetap yang responsif dengan ukuran dinamis. Ini membutuhkan 3 kelas html (atau bisa menggunakan id): user-top, admin-top, dan contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});
Ryan
sumber
Hanya FYI saya menggunakan ini dan itu bekerja dengan baik, tetapi untuk beberapa alasan aneh jika saya memiliki dua navbars, satu ukuran normal dan satu untuk layar kecil hanya berfungsi pada yang lebih besar?
NaughtySquid
@LiamDawe mungkin Anda memiliki lebih dari satu '.user-top' (misalnya) pada halaman, dalam hal ini .height () mungkin bingung ...?
Ryan
14

Ubah saja fixed-topdengan sticky-top. dengan cara ini Anda tidak perlu menghitung padding.
Dan itu berhasil !!

Shivam Agrawal
sumber
4
Sesuai BS4, ini harus menjadi jawaban yang benar. +1
Pedro Sousa
11

Untuk menangani garis pembungkus di menu-bar, terapkan id ke navbar, seperti ini:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

dan tambahkan skrip kecil ini di kepala setelah menyertakan jquery, seperti ini:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

Dengan begitu, bantalan atas bodi akan otomatis disesuaikan.

Oliver Konig
sumber
Saya harus mengubah referensi kedua ketinggian pada contoh Anda menjadi $ ('# topnavbar'). Height () dan kemudian ini bekerja dengan sempurna untuk saya. Terima kasih!
notruthless
1
Terima kasih atas komentarnya! Saya memperbaikinya dalam jawaban.
Oliver Konig
Ini adalah solusi terbaik yang saya temui yang berfungsi pada PC, iOS, Android - semua perangkat. Semua yang lain adalah nilai piksel yang dikode keras atau terlalu panjang dan tidak berfungsi di semua perangkat.
Manusia Orakular
Solusi yang bagus. Saya memiliki beberapa offset kecil yang tidak diperhitungkan dalam perhitungan. Saya kira itu karena bilah navigasi saya memiliki beberapa margin. Saya memilih untuk mengubah panggilan tinggi () untuk panggilan outerHeight () untuk mempertimbangkan hal ini.
Leonardo Santos
4

untuk Bootstrap 3. +, saya akan menggunakan CSS berikut ini untuk memperbaiki navbar-fixed-top dan masalah jangkar jump overlap berdasarkan https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
bensin
sumber
Masalah yang sama, jawaban yang bagus.
McGrady
2

gunakan kelas ini di dalam nav tag

class = "navbar navbar-rent-lg navbar-light bg-light sticky-top "

Untuk bootstrap 4

Kynginthenorth
sumber
Saya tidak akan pernah tahu mengapa itu dibatalkan, karena itu bekerja untuk saya dan semua orang lain.
Kynginthenorth
Ini benar. Satu-satunya masalah adalah bahwa, di dokumen, tertulis "Utilitas .sticky-top menggunakan posisi CSS: sticky, yang tidak sepenuhnya didukung di semua browser"
José
1

Yang harus Anda lakukan adalah 

@media (min-width: 980px) { body { padding-top: 40px; } }
Venkat Kotra
sumber
0

Lebih jauh ke jawaban Nick Bisby, jika Anda mendapatkan masalah ini menggunakan HAML di rel dan Anda telah menerapkan perbaikan Roberto Barros di sini:

Saya mengganti persyaratan di "bootstrap_and_overrides.css" ke:

= memerlukan twitter-bootstrap-static / bootstrap.css.erb

(Lihat https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )

... Anda harus meletakkan body CSS sebelum pernyataan yang diminta sebagai berikut:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

Jika pernyataan membutuhkan sebelum CSS tubuh, itu tidak akan berlaku.

danielmbarlow
sumber
0

Saya akan melakukan ini:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

Ini harus memastikan blok nav tidak meregangkan downpage dan mencakup konten halaman.

pengembang10
sumber
-4

Saya baru saja membungkus navbar menjadi 

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

Tidak ada fokus mewah tapi itu berhasil ..

TTbooster
sumber
Jawaban Anda tidak jelas dan gagal mengatasi masalah ini. Apa yang nav-? ??diwakili?
fragilewindows