Twitter Bootstrap Navbar fest oben überlappende Website

347

Ich verwende Bootstrap auf meiner Website und habe Probleme mit der festen Navigationsleiste. Wenn ich nur die normale Navigationsleiste verwende, ist alles in Ordnung. Wenn ich jedoch versuche, es auf Navbar Fixed Top umzuschalten, verschiebt sich der gesamte andere Inhalt der Site nach oben, als ob die Navbar nicht vorhanden wäre und die Navbar sie überlappt. Hier ist im Grunde, wie ich es ausgelegt habe:

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

Ich habe versucht, Bootstraps-Beispiele genau zu kopieren, hatte aber immer noch dieses Problem nur, wenn ich die feste Navigationsleiste oben verwendete. Was mache ich falsch?

html twitter-bootstrap Matthew Berman
quelle

527

Ihre Antwort ist richtig in den Dokumenten :

Körperpolsterung erforderlich

Die feste Navigationsleiste überlagert Ihre anderen Inhalte, es sei denn, Sie fügen paddingsie oben hinzu <body>. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50 Pixel hoch.
body { padding-top: 70px; }
Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS einfügen.

und in den Bootstrap 4-Dokumenten ...

Feste Navigationsleisten verwenden Position: fest, was bedeutet, dass sie aus dem normalen Fluss des DOM gezogen werden und möglicherweise benutzerdefiniertes CSS erfordern (z. B. Auffüllen oben auf dem), um Überlappungen mit anderen Elementen zu vermeiden.

rfunduk
quelle

16

Aber wenn Sie das Fenster minimieren, erscheint die Navigationsleiste nach 40px, wie soll ich damit umgehen ..

Aravindhan

5

Es wird wahrscheinlich nach 40px angezeigt, weil Sie dies nicht "nach dem Bootstrap-Kern-CSS und vor dem optionalen responsiven CSS hinzufügen".

Collimarco

1

Diese Antwort ist richtig, funktioniert aber nur dann gut, wenn Sie die 40px-Polsterung reaktionsschnell gestalten (siehe Antwort von Dan oder Nick).

Tony Bathgate

1

Siehe die Antwort von @ qub1n, wenn Sie keine Polsterung (oder etwas anderes) hinzufügen möchten.

scharfmn

2

@ JerSchneid Das Beispiel für navbar-fixed-top auf w3schools.com zeigt dasselbe Verhalten. Ich neige dazu, es einen Fehler zu nennen.

Tony Martin

125

Wie andere bereits gesagt haben, funktioniert das Hinzufügen eines Polsteroberteils zum Körper hervorragend. Wenn Sie den Bildschirm jedoch schmaler machen (auf die Breite des Mobiltelefons), entsteht eine Lücke zwischen der Navigationsleiste und dem Körper. Eine überfüllte Navigationsleiste kann auch in eine mehrzeilige Leiste umgewandelt werden, wodurch ein Teil des Inhalts erneut überschrieben wird.

Dies löste diese Art von Problemen für mich

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

Dies führt standardmäßig zu einer Auffüllung von 40 Pixel und einer Auffüllung von 0 Pixel bei einer Breite von weniger als 768 Pixel (was laut Bootstrap-Dokumenten der Grenzwert für das Layout des Mobiltelefons ist, an dem die Lücke entstehen würde)

Nick Bisby
quelle

1

Geht diese Lösung auch zwischen dem Bootstrap-Kern-CSS und den reaktionsschnellen CSS-Importen? Ich sehe immer noch die Lücke, wenn die Fensterbreite weniger als 980 beträgt. Ich vermute, dass die reaktionsfähigen CSS-Überschreibungen später importiert werden. Wenn ich diese Lösung unter den reaktionsschnellen CSS-Import verschiebe, erhalte ich immer noch das Body-Padding sowie eine zusätzliche Zeile in der Menüleiste.

Faultier

Ich verwende Twitter Bootstrap 2.3.2. Ich habe festgestellt, dass das Dokument den 40px-Vorschlag nicht mehr enthält, obwohl der Bedarf weiterhin besteht.

Faultier

1

Eh, der 40px-Vorschlag ist immer noch da, er hat sich gerade bewegt. Entschuldigung für den Kommentar-Spam.

Faultier

3

von Bootstrap 3. + body { padding-top: 40px; }ist genug

andilabs

8

Diese Lösung ist auf dem richtigen Weg. Es reicht nicht aus, nur Polster in den Körper zu legen, wie dokumentiert, selbst bei 3. +. Mit der richtigen Kombination von Medienabfragen kann der gewünschte Effekt erzielt werden, wenn die Navigationsleiste mit einer Größenänderung des Browsers umbrochen wird. In meinem Fall muss ich die Polsterung auf 1148px, 900px und 768px Breite ändern.

John McCann

34

Eine viel praktischere Lösung für Ihre Referenz. Sie funktioniert perfekt in allen meinen Projekten:

Ändern Sie Ihre erste Zeile von

.navbar.navbar-fixed-top

zu

.navbar.navbar-default.navbar-static-top

Catsky
quelle

1

trollst du nur oder habe ich etwas beaufsichtigt?

Chyno

Wie kam es zu 10 Upvotes? navbar-default fügt nur Farbe und Hintergrundfarbe hinzu ...

Denny Mueller

2

navbar-static-top ist die Änderung und es hat bei mir funktioniert. Vielen Dank!

Kevthanewversi

1

navbar-static-top hat es auch für mich behoben. Am wenigsten aufdringlich.

xpagesbeast

3

Dies funktioniert, wenn die Navigationsleiste nicht immer oben auf dem Bildschirm angezeigt werden muss. Das navbar-static-top ist nicht fixiert, es scrollt mit dem Bildschirm. Dies veranschaulicht die verschiedenen Navbar-Stile: getbootstrap.com/docs/3.3/examples/navbar-static-top

Victor Ionescu

26

Dieses Problem ist bekannt und es gibt eine Problemumgehung auf der Twitter-Bootstrap-Site:

Denken Sie beim Anbringen der Navigationsleiste daran, den verborgenen Bereich darunter zu berücksichtigen. Fügen Sie 40px oder mehr Polsterung zum hinzu <body>. Stellen Sie sicher, dass Sie dies nach dem Bootstrap-Kern-CSS und vor dem optionalen responsiven CSS hinzufügen.

Das hat bei mir funktioniert:

body { padding-top: 40px; }

Davidrac
quelle

9

Aber wenn Sie das Fenster minimieren, erscheint die Navigationsleiste nach 40px, wie soll ich damit umgehen ..

Aravindhan

1

Ja, diese Lösung funktioniert bei mobilen Bildschirmgrößen nicht gut. Im Breitbildmodus meines Telefons wird die Site im Grunde genommen unbrauchbar.

Tony Bathgate

Welches optionale responsive CSS? Ich habe immer nur ein (Kern-) Bootstrap-CSS verwendet - ich spreche über Version 3.7.x UPWARDS; Wurde es vor Version 3.7.x in verschiedene CSSs aufgeteilt?

Joedotnot

26

@ Ryan, Sie haben Recht, wenn Sie die Höhe hart codieren, funktioniert dies bei benutzerdefinierten Navigationsleisten schlecht. Dies ist der Code, den ich gerne für BS 3.0.0 verwende:

$(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
quelle

3

Anstatt parseIntdie CSS-Werte für height zu verwenden, habe ich nur verwendet $('#main-navbar').height(), aber ansonsten war dies sehr hilfreich und hat mein Problem gelöst, danke.

Tylerwal

Dies ist genau das, was Sie brauchen, es sei denn, Ihre Navigationsleiste hat eine feste Höhe.

CraigP

21

Ich stelle dies vor den Ertragsbehälter:

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

Ich mag diesen Ansatz, weil er den Hack dokumentiert, der erforderlich ist, damit er funktioniert, und auch für das mobile Navigationssystem.

BEARBEITEN - das funktioniert viel besser:

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

Dan
quelle

16

Das Problem liegt bei navbar-fixed-top, das Ihren Inhalt überlagert, sofern nicht das Body-Padding angegeben wird. Keine hier bereitgestellte Lösung funktioniert in 100% der Fälle. Die JQuery-Lösung blinkt / verschiebt die Seite, nachdem die Seite geladen wurde, was seltsam aussieht.

Die wirkliche Lösung für mich ist nicht, Navbar-Fixed-Top zu verwenden, sondern 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
quelle

1

Ja, das ist besser, da die Polsterung des Körpers für jede Bildschirmgröße dynamisch ist und ihre Lösung nicht gut ist.

Ronen Festinger

Aber dann gibt es einen leeren weißen Streifen über der Navigationsleiste.

user2075599

16

Wie ich in einer ähnlichen Frage gepostet habe, hatte ich gute Erfolge beim Erstellen einer nicht festen Dummy-Navigationsleiste direkt vor meiner echten festen Navigationsleiste.

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

Der Abstand funktioniert bei allen Bildschirmgrößen hervorragend.

Jason Butler
quelle

Dies ist, was wir tun. Platziert den Körperinhalt genau an der richtigen Stelle, ohne js-Code, Vermutungen oder irgendetwas. .

FredArters

1

Das verdient viel mehr Upvotes, funktioniert einwandfrei, ist hässlich wie die Hölle, aber nur der Code: D

JRsz

Vielen Dank, dies ist eine viel elegantere Lösung als Top-Padding oder Randpixel und so ...

Pedro Reis

3

Leider funktioniert dies nicht für Handys, wenn Navis in eine Spalte gelangen.

Pedro Reis

16

Die Lösung für Bootstrap 4 funktioniert perfekt in allen meinen Projekten:

Ändern Sie Ihre erste Zeile von

navbar-fixed-top

zu

sticky-top

Referenz zur Bootstrap-Dokumentation

Mit der Zeit haben sie das richtig gemacht: D.

Rick
quelle

Einige Benutzer verwenden möglicherweise Fixed-Top, um die Links beim Scrollen auf der Seite anzuzeigen. obwohl könnte diese Funktion hilfreich sein , wenn Sie nicht über diese :) egal

knowledge_is_power

Beachten Sie auch, dass .sticky-top position: sticky verwendet, was nicht in jedem Browser vollständig unterstützt wird.

Live-Love

14

Alle vorherigen Lösungen codieren 40 Pixel auf die eine oder andere Weise spezifisch in HTML oder CSS. Was ist, wenn die Navigationsleiste eine andere Schriftgröße oder ein anderes Bild enthält? Was ist, wenn ich einen guten Grund habe, mich überhaupt nicht mit der Körperpolsterung herumzuschlagen? Ich habe nach einer Lösung für dieses Problem gesucht, und hier ist, was ich mir ausgedacht habe:

$(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'});
});

Sie können es nach oben oder unten bewegen, indem Sie die '1' einstellen. Es scheint für mich unabhängig von der Größe des Inhalts in der Navigationsleiste vor und nach der Größenänderung zu funktionieren.

Ich bin gespannt, was andere darüber denken: Bitte teilen Sie Ihre Gedanken mit. (Es wird übrigens überarbeitet, um nicht zu wiederholen.) Gibt es neben der Verwendung von jQuery noch andere Gründe, das Problem nicht auf diese Weise anzugehen? Ich habe es sogar mit einer sekundären Navigationsleiste wie dieser zum Laufen gebracht:

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

PS: Oben ist Bootstrap 2.3.2 - funktioniert es in 3.x Solange die generischen Klassennamen erhalten bleiben ... sollte es tatsächlich unabhängig von Bootstrap funktionieren, oder?

BEARBEITEN: Hier ist eine vollständige Abfragefunktion, die zwei gestapelte, reaktionsschnelle feste Navigationsleisten mit dynamischer Größe verarbeitet. Es erfordert 3 HTML-Klassen (oder könnte IDs verwenden): user-top, admin-top und 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
quelle

Nur zu Ihrer Information, ich benutze dies und es funktioniert großartig, aber aus irgendeinem Grund funktioniert es nur auf dem größeren, wenn ich zwei Navigationsleisten habe, eine normale Größe und eine für kleine Bildschirme?

NaughtySquid

@LiamDawe Vielleicht haben Sie mehr als ein '.user-top' (zum Beispiel) auf der Seite. In diesem Fall könnte die .height () verwirrt werden ...?

Ryan

14

Wechseln Sie einfach fixed-topmit sticky-top. Auf diese Weise müssen Sie die Polsterung nicht berechnen.
Und es funktioniert!!

Shivam Agrawal
quelle

4

Laut BS4 sollte dies die richtige Antwort sein. +1

Pedro Sousa

11

Wenden Sie zum Behandeln von Zeilenumbrüchen in der Menüleiste eine ID wie folgt auf die Navigationsleiste an:

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

und fügen Sie dieses kleine Skript in den Kopf ein, nachdem Sie die Abfrage wie folgt eingefügt haben:

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

Auf diese Weise wird die obere Polsterung des Körpers automatisch angepasst.

Oliver Konig
quelle

Ich musste den zweiten Verweis auf height in Ihrem Beispiel in $ ('# topnavbar'). Height () ändern, und dann funktionierte dies perfekt für mich. Vielen Dank!

rücksichtslos

1

Danke für den Kommentar! Ich habe es in der Antwort behoben.

Oliver König

Dies ist die beste Lösung, die mir begegnet ist und die auf dem PC, iOS, Android und allen Geräten funktioniert. Alle anderen sind entweder fest codierte Pixelwerte oder zu lang und funktionieren nicht auf allen Geräten.

Oracular Man

Schöne Lösung. Ich hatte einige kleine Offsets, die bei der Berechnung nicht berücksichtigt wurden. Ich denke, das lag daran, dass meine Navigationsleiste einige Ränder hatte. Ich habe mich dafür entschieden, den height () -Aufruf für einen OuterHeight () -Aufruf zu ändern, um dies zu berücksichtigen.

Leonardo Santos

4

Für Bootstrap 3. + würde ich folgendes CSS verwenden, um das Problem mit der Überlappung von Navbar-Fixed-Top und Ankersprung basierend auf https://github.com/twbs/bootstrap/issues/1768 zu beheben

/* 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; 
}

Benzin
quelle

Gleiches Problem, nette Antwort.

McGrady

2

Verwenden Sie diese Klasse im Navi-Tag

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

Für Bootstrap 4

Kynginthenorth
quelle

Ich werde nie wissen, warum es abgelehnt wurde, da es für mich und alle anderen funktioniert hat.

Kynginthenorth

Das ist richtig. Das einzige Problem ist, dass in den Dokumenten steht: "Das Dienstprogramm .sticky-top verwendet die Position von CSS: sticky, was nicht in allen Browsern vollständig unterstützt wird"

José

1

Alles was du tun musst, ist

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

Venkat Kotra
quelle

0

Neben der Antwort von Nick Bisby, wenn Sie dieses Problem mit HAML in Schienen haben und Roberto Barros 'Fix hier angewendet haben:

Ich habe die Anforderung in der Datei "bootstrap_and_overrides.css" durch Folgendes ersetzt:

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

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

... Sie müssen das Body-CSS wie folgt vor die require-Anweisung stellen:

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

Wenn sich die require-Anweisung vor dem Body-CSS befindet, wird sie nicht wirksam.

Danielmbarlow
quelle

0

Ich würde das tun:

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

Dies sollte sicherstellen, dass der Navigationsblock die Downpage nicht streckt und den Seiteninhalt abdeckt.

Entwickler10
quelle

-4

Ich habe gerade die Navigationsleiste in eine eingewickelt

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

Kein ausgefallener Hokuspokus, aber es hat funktioniert.

TTbooster
quelle

Ihre Antwort ist unklar und kann das Problem nicht lösen. Was bedeutet nav-? ???

fragilewindows

Twitter Bootstrap Navbar fest oben überlappende Website

Antworten:

Körperpolsterung erforderlich