twitter bootstrap barre de navigation supérieure fixe qui se chevauchent site

j'utilise bootstrap sur mon site et j'ai des problèmes avec le navbar fixe top. Quand j'utilise la navbar normale, tout va bien. Cependant, quand j'essaie de passer à navbar fixe top, tous les autres contenus sur le site se déplace vers le haut comme le navbar n'est pas là et le navbar le chevauche. voici en gros comment je l'ai présenté: 

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

j'ai essayé de copier des exemples de bootstraps exactement, mais ayant toujours ce problème seulement lors de l'utilisation navbar fixe top. quel je fais mal?

304
demandé sur Lauri Piispanen 2012-06-20 21:17:19

16 réponses

votre réponse est juste dans le docs :

revêtement de corps requis

la barre de navigation fixe superposera votre autre contenu, à moins que vous n'ajoutiez padding au haut du <body> . Essayez vos propres valeurs ou utilisez notre petit extrait ci-dessous. Astuce: par défaut, la barre de navigation est haute de 50px. 

body { padding-top: 70px; }

assurez-vous d'inclure ce après le Bootstrap de base CSS.

et dans le Bootstrap 4 docs...

navbar fixe position d'utilisation: fixe, ce qui signifie qu'ils sont tirés de la flux normal de la DOM et peut nécessiter des CSS personnalisés (par exemple, rembourrage) sur l' ) pour éviter tout chevauchement avec d'autres éléments.

454
répondu rfunduk 2018-08-20 14:55:23

comme d'autres ont déclaré l'ajout d'un rembourrage-top au corps fonctionne très bien. Mais quand vous faites l'écran plus étroit (aux largeurs de téléphone cellulaire) il y a un écart entre le navbar et le corps. En outre, un navbar bondé peut envelopper à une barre multi-ligne, écrasant une partie du contenu à nouveau.

Cela a résolu ce genre de problème pour moi 

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

Cela fait un padding 40px par défaut et 0px quand sous 768px largeur (qui selon les docs de bootstrap est la cellule de téléphone de mise en page de coupure où l'écart devrait être créé)

112
répondu Nick Bisby 2012-10-24 14:56:58

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

changez la première ligne de 

.navbar.navbar-fixed-top

à 

.navbar.navbar-default.navbar-static-top
27
répondu catsky 2015-06-18 22:04:10

ce numéro est connu et il y a une solution dans le site twitter bootstrap:

lorsque vous apposez la barre de navigation, n'oubliez pas de tenir compte de la zone cachée en-dessous. Ajouter 40px ou plus de rembourrage au <body> . Veillez à ajouter ceci après le noyau Bootstrap CSS et avant l'optionnel responsive CSS.

cela a fonctionné pour moi: 

body { padding-top: 40px; }
25
répondu davidrac 2012-10-14 21:35:35

@Ryan, vous avez raison, le codage dur de la hauteur le fera fonctionner mal en cas de navbars personnalisés. C'est le code que j'utilise pour BS 3.0.0 heureusement: 

$(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);         
});
23
répondu Aram Paronikyan 2013-10-17 06:50:54

j'ai mis ceci avant le récipient de rendement: 

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

j'aime cette approche parce qu'elle documente le piratage nécessaire pour le faire fonctionner, plus il fonctionne également pour le nav mobile.

EDIT - cela fonctionne beaucoup mieux: 

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
19
répondu Dan 2012-12-22 16:28:08

le problème est avec navbar-fixed-top, qui va superposer votre contenu à moins de spécifier le corps-padding. Aucune solution fournie ici ne fonctionne à 100%. La solution jQuery clignote/déplace la page après que la page est chargée, ce qui semble bizarre.

la vraie solution pour moi n'est pas d'utiliser navbar-fixe-top, mais navbar-statique-top. 

.navbar { margin-bottom:0px;} //for jumtron support, see /q/gap-between-navbar-and-jumbotron-75735/"navbar navbar-inverse navbar-static-top">
...
</nav>
15
répondu qub1n 2015-01-10 22:48:26

toutes les solutions précédentes hard-code 40 pixels spécifiquement dans le html ou CSS d'une façon ou d'une autre. Que faire si la barre de navigation contient une autre taille de police ou une image? Et si j'avais une bonne raison de ne pas jouer avec le corps rembourrage en premier lieu? J'ai été la recherche d'une solution à ce problème, et voici ce que j'ai trouvé: 

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

vous pouvez le déplacer vers le haut ou vers le bas en ajustant le '1'. Cela semble fonctionner pour moi, indépendamment de la taille du contenu dans la barre de navigation, avant et après le redimensionnement.

je suis curieux de savoir ce que les autres pensent à ce sujet: s'il vous plaît partagez vos pensées. (Il sera reconstruit à ne pas répéter, btw.) Outre l'utilisation de jQuery, y a-t-il d'autres raisons pour ne pas aborder le problème de cette façon? Je l'ai même fait travailler avec un second navbar comme celui-ci: 

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

PS: ci - dessus est sur Bootstrap 2.3.2-va-t-il fonctionner en 3.x aussi longtemps que le les noms de classe génériques demeurent... en fait, ça devrait fonctionner indépendamment de bootstrap, Non?

EDIT: Voici une fonction complète de jquery qui gère deux navbar fixes empilées et réactives de taille dynamique. Il nécessite 3 classes html(ou pourrait utiliser id): utilisateur, administrateur-haut, et 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'
        });
});
14
répondu Ryan 2013-08-05 15:20:46

comme je l'ai signalé dans une question similaire, j'ai eu un bon succès avec la création d'un mannequin Non-fixe barre de navigation juste avant mon vrai fixe 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 très bien sur toutes les tailles d'écran.

14
répondu Jason Butler 2016-03-16 01:44:49

pour la manipulation des lignes d'emballage dans la barre de menu, appliquer un id à la barre de navigation, comme ceci: 

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

et ajouter ce petit script dans la tête après avoir inclus le jquery, comme ceci: 

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

de cette façon, le rembourrage supérieur du corps est réglé automatiquement.

10
répondu Oliver Konig 2014-05-29 07:24:25

la solution pour Bootstrap 4, Il fonctionne parfait dans tous mes projets:

changez la première ligne de 

navbar-fixed-top

à 

sticky-top

documentation de Bootstrap référence

il était temps qu'ils fassent ce droit: d

4
répondu Rick 2018-07-20 13:35:47

pour Bootstrap 3.+ , J'utiliserais les CSS suivants pour fixer navbar-fixed-top et le saut d'ancre se chevauchant question basée sur 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; 
}
3
répondu gasolin 2014-12-06 08:42:56

Tout ce que vous avez à faire est de 

@media (min-width: 980px) { body { padding-top: 40px; } }
1
répondu Venkat Kotra 2014-08-13 02:13:23

suite à la réponse de Nick Bisby, si vous obtenez ce problème en utilisant HAML dans les rails et vous avez appliqué le correctif de Roberto Barros ici:

j'ai remplacé le require dans le" bootstrap_and_overrides.css":

=demander à twitter bootstrap-statique/bootstrap.CSS.erb

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

... vous besoin de mettre le corps CSS avant l'énoncé d'exigence comme suit: 

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

si l'instruction require est devant le corps CSS, elle ne prendra pas effet.

0
répondu danielmbarlow 2014-06-23 16:54:17

je ferais ceci: 

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

ceci devrait s'assurer que le bloc nav ne s'étire pas vers le bas de la page et couvre le contenu de la page.

0
répondu developer10 2015-04-30 18:29:12

je viens d'envelopper le navbar dans un 

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

Pas de fantaisie, hocus pocus, mais cela a fonctionné..

-4
répondu TTbooster 2014-03-05 01:19:41