web-dev-qa-db-fra.com

twitter bootstrap _ barre de navigation fixe le site qui se chevauche

J'utilise bootstrap sur mon site et j'ai des problèmes avec la barre de navigation fixe top. Lorsque j'utilise simplement la barre de navigation normale, tout va bien. Cependant, lorsque j'essaie de passer au top fixe de la barre de navigation, tous les autres contenus du site se déplacent comme si la barre de navigation n'existait pas et que la barre de navigation le chevauchait. voici essentiellement comment je l'ai exposé:

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

j'ai essayé de copier exactement les exemples d'amorçage, mais je n'ai toujours ce problème que lorsque vous utilisez navbar fixed top. Qu'est-ce que je fais mal?

twitter-bootstraphaml
330
Matthew Berman

Votre réponse est exacte dans le docs :

Rembourrage du corps requis

La barre de navigation fixe superposera votre autre contenu, sauf si vous ajoutez padding en haut du <body>. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Conseil: par défaut, la barre de navigation a une hauteur de 50 px.

body { padding-top: 70px; }

Assurez-vous d'inclure ceci après le noyau Bootstrap CSS.

et dans le Bootstrap 4 docs ...

Les barres de navigation fixes utilisent position: fixed, ce qui signifie qu'elles sont extraites du flux normal du DOM et peuvent nécessiter l'utilisation de CSS personnalisées (par exemple, padding-top sur la) pour éviter tout chevauchement avec d'autres éléments.

492
rfunduk

Comme d’autres l’ont dit, l’ajout d’un capuchon au corps est très pratique. Mais lorsque vous réduisez l'écran (aux largeurs des téléphones portables), il y a un écart entre la barre de navigation et le corps. En outre, une barre de navigation encombrée peut se transformer en une barre multiligne, en écrasant à nouveau une partie du contenu.

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

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

Cela crée un remplissage de 40px par défaut et de 0px lorsque la largeur est inférieure à 768px (qui, selon la documentation de bootstrap, correspond à la coupure de la disposition du téléphone cellulaire où l'espace serait créé).

120
Nick Bisby

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

changer votre première ligne de

.navbar.navbar-fixed-top

à

.navbar.navbar-default.navbar-static-top
35
catsky

Ce problème est connu et il existe une solution de contournement sur le site Twitter bootstrap:

Lorsque vous fixez la barre de navigation, n'oubliez pas de prendre en compte la zone cachée située en dessous. Ajoutez 40px ou plus de bourrage au <body>. Assurez-vous de l'ajouter après le CSS Bootstrap principal et avant le CSS réactif facultatif.

Cela a fonctionné pour moi:

body { padding-top: 40px; }
25
davidrac

@ Ryan, vous avez raison, coder en dur la hauteur le rendra mauvais en cas de barres de navigation personnalisées. C’est le code que j’utilise heureusement pour 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);         
});
23
Aram Paronikyan

Je mets cela avant le conteneur de rendement:

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

J'aime cette approche car elle documente le piratage nécessaire pour que cela fonctionne, et cela fonctionne également pour la navigation mobile.

EDIT - cela fonctionne beaucoup mieux:

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

Le problème est avec navbar-fixed-top, qui superposera votre contenu à moins que vous ne spécifiiez un remplissage de corps. Aucune solution fournie ici ne fonctionne à 100%. La solution JQuery clignote/déplace la page après le chargement de la page, ce qui semble bizarre.

La vraie solution pour moi n'est pas d'utiliser navbar-fixed-top, mais 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>
16
Tomas Kubes

Comme je l'ai déjà écrit dans une question similaire, j'ai réussi à créer une barre de navigation factice non fixe 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.

15
Jason Butler

Toutes les solutions précédentes codent en dur 40 pixels dans le code HTML ou CSS d'une manière ou d'une autre. Que se passe-t-il si la barre de navigation contient une taille de police ou une image différente? Que se passe-t-il si j’ai une bonne raison de ne pas jouer avec le padding body en premier lieu? Je cherchais une solution à ce problème et voici ce que j'ai proposé:

$(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 le bas en ajustant le "1". Cela semble fonctionner pour moi quelle que soit la taille du contenu de la barre de navigation, avant et après le redimensionnement.

Je suis curieux de savoir ce que les autres en pensent: partagez vos impressions, s'il vous plaît. (Il sera remanié afin de ne pas répéter, d'ailleurs). Outre l'utilisation de jQuery, existe-t-il d'autres raisons de ne pas aborder le problème de cette manière? Je l'ai même fonctionné avec une barre de navigation secondaire comme celle-ci:

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

PS: ci-dessus est sur Bootstrap 2.3.2 - cela fonctionnera-t-il dans 3.x Tant que les noms de classe génériques restent ... en fait, cela devrait fonctionner indépendamment de bootstrap, non?

EDIT: Voici une fonction complète de jquery qui gère deux barres de navigation fixes empilées et réactives de taille dynamique. Il nécessite 3 classes HTML (ou peut utiliser des identifiants): user-top, admin-top 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
Ryan

Pour gérer les lignes d'habillage dans la barre de menus, appliquez un identifiant à la barre de navigation, comme ceci:

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

et ajoutez 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 automatiquement ajusté.

11
Oliver Konig

La solution pour Bootstrap 4, elle fonctionne parfaitement dans tous mes projets:

changer votre première ligne de

navbar-fixed-top

à

sticky-top

référence de la documentation Bootstrap

A peu près au bon moment ils ont bien fait ça: D

10
Rick

pour Bootstrap 3. +, j'utiliserais le code CSS suivant pour résoudre le problème de chevauchement de navbar-fixed-top et du saut d'ancrage basé 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
gasolin

Tout ce que tu dois faire est

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

utiliser cette classe dans une balise de navigation

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

Pour bootstrap 4

0
Buttman

Je voudrais faire ceci:

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

Cela devrait vous assurer que le bloc de navigation ne s'étire pas et ne couvre pas le contenu de la page.

0
developer10

En réponse à la réponse de Nick Bisby, si vous rencontrez ce problème avec HAML dans Rails et que vous avez appliqué le correctif de Roberto Barros ici:

J'ai remplacé l'exigence dans "bootstrap_and_overrides.css" par:

= nécessite Twitter-bootstrap-static/bootstrap.css.erb

(Voir https://github.com/seyhunak/Twitter-bootstrap-Rails/issues/91 )

... vous devez mettre le corps CSS avant l'instruction require 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
danielmbarlow

Il suffit de changer fixed-top avec sticky-top. Ainsi, vous n'aurez pas à calculer le rembourrage.
Et il fonctionne!!

0
Shivam Agrawal