web-dev-qa-db-fra.com

barre de navigation supérieure bloquant le contenu supérieur de la page

J'ai ce code Twitter Bootstrap

  <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>

Mais lorsque je visualise le début de la page, la barre de navigation bloque une partie du contenu situé en haut de la page. Pensez-vous que le reste du contenu est plus bas lorsque le haut de la page est visualisé, de manière à ce que le contenu ne soit pas bloqué par la barre de navigation?

285
GeekedOut

Ajouter à votre CSS:

body { 
    padding-top: 65px; 
}

De la documentation Bootstrap :

La barre de navigation fixe superposera votre autre contenu, sauf si vous ajoutez un rembourrage en haut du corps.

233
Akuta

Ajouter un rembourrage comme celui-ci ne suffit pas si vous utilisez un bootstrap réactif. Dans ce cas, lorsque vous redimensionnez votre fenêtre, vous obtenez un espace entre le haut de la page et la barre de navigation. Une solution appropriée ressemble à ceci:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
359
Spajus

Pour bootstrap 3, la classe navbar-static-top au lieu de navbar-fixed-top empêche ce problème, sauf si vous avez besoin que la barre de navigation soit toujours visible.

141
gtrak

une solution beaucoup plus pratique pour votre référence, cela fonctionne parfaitement dans tous mes projets:

changer votre premier 'div' de

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

à

<div class="navbar navbar-default navbar-static-top">
58
catsky

J'utilise jQuery pour résoudre ce problème. C'est l'extrait de 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);        
});
17
Aram Paronikyan

J'ai réussi à créer une barre de navigation factice non fixée juste avant ma vraie barre de navigation fixe.

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

L'espacement fonctionne très bien sur toutes les tailles d'écran.

9
Jason Butler

Dans mon projet dérivé du tutoriel MVC 5 , j'ai constaté que la modification du remplissage du corps n'avait aucun effet. Ce qui suit a fonctionné pour moi:

@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;
    }
}

Il résout les cas où la barre de navigation se plie en 2 ou 3 lignes. Cela peut être inséré dans bootstrap.css n'importe où après le corps de la ligne {margin: 0; }

7
PiersB

Le bootstrap v4 modèle de démarrage css utilise:

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

Comme on le voit sur cet exemple de Twitter, ajoutez ceci avant la ligne qui inclut les déclarations de styles réactifs:

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

Ainsi:

<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" />
4
Nabil Kadimi

avec navbar navbar-default tout fonctionne correctement, mais si vous utilisez navbar-fixed-top, vous devez inclure un corps de style personnalisé {padding-top: 60px;} sinon, bloquera le contenu en dessous.

2
Eldiyar Talantbek

utiliser percentage est une bien meilleure solution que pixels.

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

Si nécessaire, vous pouvez toujours être explicite en ajoutant différents breakpoints comme mentionné dans une autre réponse de @spajus

1
Abhilash

Deux problèmes vont se passer ici:

  1. Chargement de la page (contenu masqué)
  2. Les liens internes comme celui-ci défileront vers le haut et seront cachés par la barre de navigation:
<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 avec des liens de page internes

Pour résoudre le problème 1), comme Martijn Burger l’a dit plus haut, le css de modèle de démarrage bootstrap v4 utilise:

body {
  padding-top: 5rem;
}

Pour résoudre 2) vérifier ce problème . Ce code fonctionne principalement (mais pas au 2ème clic du même hash):

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

Ce code anime les liens A avec jQuery (pas jQuery slim):

  // 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);
    });
  })
1
Michael Cole

EDIT: cette solution n'est pas viable pour les versions plus récentes de Bootstrap, où les classes navbar-inverse et navbar-static-top ne sont pas disponibles.

En utilisant MVC 5, la façon dont j'ai corrigé le mien, consistait simplement à ajouter mon propre site.css, chargé après les autres, avec la ligne suivante: body{padding: 0}

et j'ai changé le code au début de _Layout.cshtml, pour être:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">
1

vous devriez ajouter

 #page 
 { 
   padding-top: 65px
 }

ne pas détruire un pied collant ou autre chose

0
Sebastian Viereck

La meilleure solution que j'ai trouvée jusqu'à présent, qui n'implique pas de hauteurs de codage ni de points d'arrêt critiques, consiste à ajouter une balise supplémentaire <nav... à la balise.

<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>

En procédant de la sorte, les @media points de rupture sont identiques, la hauteur est identique (à condition que votre navbar-brand soit l’objet le plus haut de la navbar, mais vous pouvez facilement remplacer un autre élément par fixed-top barre de navigation.

Les lecteurs d’écran, qui présenteront désormais 2 navbar-brand éléments, ne fonctionneront pas. Cela met en évidence la nécessité d'une classe not-for-sr pour empêcher cet élément de se présenter aux lecteurs d'écran. Cependant, cette classe n’existe pas https://getbootstrap.com/docs/4.0/utilities/screenreaders/

J'ai essayé de compenser le problème de lecteur d'écran avec aria-hidden="true" mais https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ semble pour indiquer que cela ne fonctionnera probablement pas lorsque le lecteur d'écran est en mode de mise au point, ce qui est bien entendu le seul moment où vous en avez réellement besoin.

0
boatcoder
<div class='navbar' data-spy="affix" data-offset-top="0">

Si votre barre de navigation est située en haut de la page à l'origine, définissez la valeur sur 0. Sinon, définissez la valeur pour data-offset-top sur la valeur du contenu situé au-dessus de la barre de navigation.

En attendant, vous devez modifier la css en tant que telle:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}
0
web fan