Die obere Navigationsleiste blockiert den oberen Inhalt der Seite

296

Ich habe diesen Twitter Bootstrap Code

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Wenn ich jedoch den Anfang der Seite ansehe, blockiert die Navigationsleiste einen Teil des Inhalts, der sich oben auf der Seite befindet. Haben Sie eine Idee, wie Sie den Rest des Inhalts nach unten drücken können, wenn der obere Rand der Seite angezeigt wird, damit der Inhalt nicht von der Navigationsleiste blockiert wird?

GeekedOut
quelle
1
mögliches Duplikat von Twitter Bootstrap Navbar fest oben überlappende Website
user2428107
2
@ user2428107 Diese Frage wurde später gestellt.
Jazzpi

Antworten:

254

Fügen Sie Ihrem CSS hinzu:

body { 
    padding-top: 65px; 
}

Aus den Bootstrap-Dokumenten :

Die feste Navigationsleiste überlagert Ihren anderen Inhalt, es sei denn, Sie fügen oben am Körper Polster hinzu.

Akuta
quelle
11
Siehe zusätzliche Antwort unten von @Spajus für die Codierung dieser für
reaktionsschnelle
4
Rollen Sie auf jeden Fall mit der anderen Antwort mit etwas mehr Prägnanz mit @media (min-width: 980px) {body {padding-top: 60px; }}
Ted
3
Während die anderen Antworten dies beredter ansprechen, ist dies die offizielle Antwort, wie in der Bootstrap-Dokumentation für Fixed Navbar Link
Caffeinius
1
Wie funktioniert das, wenn der Benutzer einen schmaleren Bildschirm hat oder einfach die Größe des Fensters ändert? Der oberste Inhalt wird durch den erweiterten Navigationsleistenbereich wieder blockiert.
Konrad Viltersten
366

Das Hinzufügen eines solchen Auffüllens reicht nicht aus, wenn Sie einen reaktionsschnellen Bootstrap verwenden. In diesem Fall wird beim Ändern der Fenstergröße eine Lücke zwischen dem Seitenanfang und der Navigationsleiste angezeigt. Eine richtige Lösung sieht so aus:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
Spajus
quelle
19
Perfekt. Dies sollte wirklich irgendwie in Bootstrap integriert werden. Sie sollten eine Pull-Anfrage senden.
Brittohalloran
1
Gute Lösung, aber es gibt noch etwas, das nicht gelöst ist. Schauen Sie sich diese Frage an, die ich gerade gestellt habe, und sehen Sie, ob jemand daran helfen kann. stackoverflow.com/questions/12763707/…
ElPiter
27
Noch prägnanter: @media (min-width: 981px) {body {padding-top: 60px; }}
Ted
4
@ Ted für mich muss es min-width sein: 980px ;-)
white_gecko
3
@white_gecko lol. Ja. Dieser 980 wollte nur ein ganz besonderes Unikat sein ;-)
Ted
143

Bei Bootstrap 3 verhindert die Klasse dieses Problem, navbar-static-topanstatt navbar-fixed-top, dass die Navigationsleiste immer sichtbar sein muss.

gtrak
quelle
2
Dies funktioniert jedoch möglicherweise etwas Platz über der Navigationsleiste. Möglicherweise müssen Sie site.css ändern und padding-top 80px aus dem Body entfernen.
ZZZ
9
Ich habe alles versucht und dies ist die einzige Antwort, die funktioniert hat. Da dies die allgemeinste Lösung ist und nicht von der Bildschirmgröße abhängt, sollte dies die richtige Antwort sein.
Blairg23
1
Dies hat das Problem behoben. Warum funktioniert dies anstelle von Navbar-Fixed-Top?
Hlyates
Bei Bootstap 3.3.4 hat es nicht funktioniert. Ich sehe ein Beispiel für eine feste Navigation auf der Bootstrap-Site getbootstrap.com/examples/navbar-fixed-top . Es verwendet Padding-Top
Alireza Fattahi
2
Während dies funktioniert, wird die Navigationsleiste statisch und nicht repariert. Das heißt, wenn Sie nach unten scrollen, verschwindet die Navigationsleiste ... zumindest für mich ist das nicht gut.
tbkn23
62

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

ändere dein erstes 'div' von

<div class='navbar navbar-fixed-top'>

zu

<div class="navbar navbar-default navbar-static-top">
Catsky
quelle
28
Die statische Navigationsleiste verschwindet beim Scrollen.
Daniel C. Sobral
1
Re: @ DanielC.Sobral Antwort - Sie könnten es für das feste in js austauschen, wenn es von oben
rollt
17

Ich benutze jQuery, um dieses Problem zu lösen. Dies ist das Snippet für BS 3.0.0:

$(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
2
Ich habe ein Bild über der Navigationsleiste verwendet und hatte echte Probleme mit dem Ausblenden des Inhalts. Das hat perfekt funktioniert! Vielen Dank!
Richard Varno
2
Vielen Dank für Ihre Lösung. Diese Antwort hat für mich wie ein Zauber gewirkt :) Ich möchte eine Sache hinzufügen. Wenn Sie die Seite laden, wird der Text nach oben gesetzt, bevor er sich automatisch anpasst, da jquery nicht sofort ausgeführt wird. Um es reibungsloser zu machen, habe ich dies in CSS body {padding-top: // Anfangshöhe meiner Navigationsleiste; } Dies hilft bei einem reibungslosen Übergang! Danke nochmal!
AAA
1
Vielen Dank für die Inspiration einer programmatischen Lösung! Ich habe jetzt eine großartige funktionierende Implementierung in GWT mit schön gekapseltem, gut strukturiertem Code ... dank eines Mangels an Javascript ;-)
Alex Worden
9

Ich habe gute Erfolge mit der Erstellung einer nicht fixierten Dummy-Navigationsleiste direkt vor meiner echten festen Navigationsleiste erzielt.

<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
Ich dachte zuerst, dies sei die Antwort und war bereit, eine Gegenstimme abzugeben. Aber dann wurde mir klar, dass es nicht funktioniert, wenn die Größe schmal genug wird, um die Menüschaltflächen zu stapeln. :-(
Steve In CO
Sie haben Recht, es funktioniert nicht mit dem Stapeln von Menüs ohne zusätzlichen Code. Normalerweise halte ich meine Menüleisten nur auf einer Höhe und verwandle die Menüoptionen in einen Hamburger-Button, wenn sich die Größe verringert.
Jason Butler
Ich habe keine Ahnung warum, aber das funktioniert. Kannst du näher erläutern, warum es funktioniert?
rote Sicherheit
Großartige Idee! Dies ist nützlich, wenn einige Seiten eine Navigationsleiste haben und andere nicht, da es nicht möglich ist, von einer CSS-Datei zu unterscheiden.
Laurent
Dies ist definitiv der richtige Weg. Es funktioniert auf allen Geräten, auch wenn die Navigationsleiste in zwei Zeilen unterteilt ist. +1
7

In meinem aus dem MVC 5-Tutorial abgeleiteten Projekt stellte ich fest, dass das Ändern der Körperpolsterung keine Auswirkungen hatte. Folgendes hat bei mir funktioniert:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

Es löst die Fälle, in denen die Navigationsleiste in 2 oder 3 Zeilen gefaltet wird. Dies kann an einer beliebigen Stelle nach dem Zeilenkörper in bootstrap.css eingefügt werden {margin: 0; }}

PiersB
quelle
6

Die Bootstrap v4- Startervorlage CSS verwendet:

body {
  padding-top: 5rem;
}
Martijn Burger
quelle
4

Fügen Sie dies, wie in diesem Beispiel von Twitter zu sehen, vor der Zeile hinzu, die die Deklarationen der Antwortstile enthält:

<style> 
    body {
        padding-top: 60px;
    }
</style>

Wie so:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
Nabil Kadimi
quelle
2

Mit navbar navbar-default funktioniert alles einwandfrei. Wenn Sie jedoch navbar-fixed-top verwenden , müssen Sie einen benutzerdefinierten Stil body {padding-top: 60px;} einfügen, da sonst der Inhalt darunter blockiert wird.

Eldiyar Talantbek
quelle
3
Dies fügt keine Informationen hinzu, die nicht bereits in anderen Antworten enthalten sind.
Tom Zych
2

Hier treten zwei Probleme auf:

  1. Seitenladen (Inhalt ausgeblendet)
  2. Interne Links wie dieser werden nach oben gescrollt und von der Navigationsleiste ausgeblendet:
<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

Bootstrap 4 mit internen Seitenlinks

Um 1) zu beheben, verwendet die Bootstrap v4-Startervorlage CSS, wie Martijn Burger oben sagte:

body {
  padding-top: 5rem;
}

Um dies zu beheben 2) Überprüfen Sie dieses Problem . Dieser Code funktioniert meistens (aber nicht beim zweiten Klick auf denselben Hash):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

Dieser Code animiert A-Links mit jQuery (nicht schlankes jQuery):

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })
Michael Cole
quelle
2

Die beste Lösung, die ich bisher gefunden habe und die keine harten Codierungshöhen und Haltepunkte beinhaltet, besteht darin <nav..., dem Markup ein zusätzliches Tag hinzuzufügen .

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

Auf diese Weise sind die @mediaHaltepunkte identisch, die Höhe ist identisch (vorausgesetzt, Sie navbar-brandsind das höchste Objekt in der, navbaraber Sie können problemlos ein anderes Element in der Nicht- fixed-topNavigationsleiste ersetzen.

Dies schlägt bei Bildschirmleseprogrammen fehl, die nun 2 navbar-brandElemente präsentieren. Dies weist auf die Notwendigkeit einer not-for-srKlasse hin, um zu verhindern, dass dieses Element für Bildschirmleser angezeigt wird. Diese Klasse existiert jedoch nicht https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Ich habe versucht, das Problem mit dem Bildschirmleser zu kompensieren, aria-hidden="true"aber https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ scheint darauf hinzudeuten, dass dies wahrscheinlich nicht funktioniert, wenn der Bildschirmleser aktiviert ist im Fokusmodus, der natürlich das einzige Mal ist, dass Sie ihn tatsächlich zum Arbeiten benötigen ...

Bootscodierer
quelle
1

mit percentage ist eine viel bessere Lösung als pixels.

body {
  padding-top: 10%; //This works regardless of display size.
}

Bei Bedarf können Sie immer noch explizit sein, indem Sie verschiedene hinzufügen, breakpointswie in einer anderen Antwort von erwähnt@spajus

Abhilash
quelle
1

BEARBEITEN: Diese Lösung ist für neuere Versionen von Bootstrap nicht geeignet, bei denen die Klassen navbar-inverse und navbar-static-top nicht verfügbar sind.

Mit MVC 5 habe ich meine behoben, indem ich einfach meine eigene Site.css hinzugefügt habe, die nach den anderen geladen wurde, mit der folgenden Zeile: body{padding: 0}

und ich habe den Code am Anfang von _Layout.cshtml so geändert, dass er lautet:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">
Ultroman der Tacoman
quelle
navbar-static-topist in Bootstrap4 nicht definiert. Weder istnavbar-inverse
Bootscodierer
Ich denke, diese Antwort ist also veraltet. Ich werde der Antwort eine Notiz hinzufügen.
Ultroman der Tacoman
0
<div class='navbar' data-spy="affix" data-offset-top="0">

Wenn sich Ihre Navigationsleiste ursprünglich oben auf der Seite befindet, setzen Sie den Wert auf 0. Andernfalls legen Sie den Wert für fest data-offset-top auf den Wert des Inhalts über Ihrer Navigationsleiste.

In der Zwischenzeit müssen Sie Folgendes ändern css:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}
Web-Fan
quelle
0

Füge das hinzu:

.navbar {
  position: relative;
}
Imcoder
quelle
0

Sie sollten hinzufügen

#page {
  padding-top: 65px
}

eine klebrige Fußzeile oder etwas anderes nicht zerstören

Sebastian Viereck
quelle
-1

Fügen Sie Ihrem JS hinzu:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});
Cottonova
quelle
Dies funktioniert nicht, wenn die Größe des Fensters geändert wird, da Ihr Polster nur dann angewendet wird, wenn das Dokument fertig ist.
Bootscodierer
-2

Sie können den Rand basierend auf der Bildschirmauflösung einstellen

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}
BradDaley
quelle