en haut de la barre de navigation de blocage en haut du contenu de la page

L'ajout d'un rembourrage comme cela n'est pas suffisant si vous êtes en responsive bootstrap. Dans ce cas, lorsque vous redimensionnez votre fenêtre vous pouvez obtenir un écart entre le haut de la page et la barre de navigation. Une bonne solution ressemble à ceci:

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

beaucoup plus pratique pour votre référence, il 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">

J'ai eu un bon succès avec la création d'un mannequin non-correction de la barre de navigation à droite avant mon fixe la barre de navigation.

<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 sur tous les formats d'écran.

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

body {
  padding-top: 5rem;
}

avec navbar navbar-par défaut tout fonctionne bien, mais si vous utilisez navbar-fixed-top, vous devez inclure le style personnalisé body { padding-top: 60px;} sinon il va bloquer le contenu en dessous.

Deux problèmes vont se passer ici:

1. De chargement de la Page (contenu caché)
2. Liens internes de ce genre de défilement vers le haut, et être caché 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 w/les liens des pages internes

À fixer 1), Martijn Burger dit ci-dessus, le bootstrap v4 modèle de démarrage css utilise:

body {
  padding-top: 5rem;
}

De fixer 2) découvrez ce problème. Ce code fonctionne majoritairement (mais pas sur le 2ème clic de même hash):

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

Ce code anime Un liens avec jQuery (pas slim 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);
    });
  })

vous devez ajouter

 #page 
 { 
   padding-top: 65px
 }

pour ne pas détruire un collant, pied de page ou quelque chose d'autre

La meilleure solution que j'ai trouvé jusqu'à présent, qui ne nécessite pas de codage en dur des hauteurs et des points d'arrêt est d'ajouter un supplément de <nav... balise pour le balisage.

<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 le faisant de cette manière, le @media les points d'arrêt sont identiques, la hauteur est identique (à condition que votre navbar-brand est l'objet le plus haut dans le navbar mais vous pouvez facilement le remplacer par un autre élément dans le non fixed-top navbar.

En cas d'échec est avec les lecteurs d'écran qui va maintenant présenter 2 navbar-brand éléments. Cela souligne la nécessité pour un not-for-sr classe pour empêcher que l'élément de montrer aux lecteurs d'écran. Cependant, cette classe n'existe pas https://getbootstrap.com/docs/4.0/utilities/screenreaders/

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

vous pouvez définir la marge fondée sur la résolution de l'écran

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