twitter bootstrap navbar site fixe se chevauchant

347

J'utilise bootstrap sur mon site et j'ai des problèmes avec le haut fixe de la barre de navigation. Lorsque j'utilise simplement la barre de navigation standard, tout va bien. Cependant, lorsque j'essaie de le basculer vers le haut fixe de la barre de navigation, tous les autres contenus du site se déplacent comme si la barre de navigation n'était pas là et la barre de navigation la chevauchait. voici 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 toujours avec ce problème uniquement lors de l'utilisation de la barre fixe de navbar. Qu'est-ce que je fais mal?

html twitter-bootstrap Matthew Berman
la source

Réponses:

527

Votre réponse est juste dans les documents :

Rembourrage du corps requis

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

body { padding-top: 70px; }

Assurez-vous de l'inclure après le CSS Bootstrap de base.

et dans les documents Bootstrap 4 ...

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

rfunduk
la source
16
Mais lorsque vous minimisez la fenêtre, la barre de navigation apparaît après 40 pixels, comment dois-je la gérer?
Aravindhan
5
Il apparaît après 40 pixels probablement parce que vous n'ajoutez pas ceci après le CSS Bootstrap de base et avant le CSS réactif facultatif.
collimarco
1
Cette réponse est vraie, mais cela ne fonctionne bien que lorsque vous faites du rembourrage 40px un style réactif, voir la réponse de Dan ou Nick.
Tony Bathgate
1
Consultez la réponse de @ qub1n si vous ne souhaitez pas ajouter de remplissage (ou autre).
scharfmn
2
@JerSchneid L'exemple de navbar-fixed-top sur w3schools.com montre le même comportement. J'ai tendance à appeler ça un bug.
Tony Martin
125

Comme d'autres l'ont déclaré, l'ajout d'un rembourrage sur le corps fonctionne très bien. Mais lorsque vous rétrécissez l'écran (aux largeurs de téléphone portable), 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 multi-lignes, é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 fait un rembourrage de 40 pixels par défaut et 0 pixel lorsque la largeur est inférieure à 768 pixels (ce qui, selon les documents de bootstrap, est la coupure de la disposition du téléphone portable où l'écart serait créé)

Nick Bisby
la source
1
Cette solution va-t-elle également entre le noyau Bootstrap CSS et les importations CSS réactives? Je vois toujours l'écart lorsque la largeur de la fenêtre est inférieure à 980. Je suppose que l'importation ultérieure des remplacements CSS réactifs. Si je déplace cette solution sous l'importation CSS réactive, je reçois toujours le rembourrage du corps, plus une ligne supplémentaire dans la barre de menus.
slothbear
J'utilise Twitter Bootstrap 2.3.2. J'ai remarqué que le document ne contient plus la suggestion de 40 pixels, bien que le besoin existe toujours.
slothbear
1
Eh, la suggestion 40px est toujours là, elle vient de bouger. Désolé pour le spam de commentaires.
slothbear
3
par Bootstrap 3. + body { padding-top: 40px; }suffit
andilabs
8
Cette solution est sur la bonne voie. Il suffit de mettre un rembourrage dans le corps, comme documenté, même sur 3. +. Avec la bonne combinaison de requêtes multimédias, l'effet souhaité peut être obtenu lorsque la barre de navigation s'enroule avec le redimensionnement du navigateur. Dans mon cas, je dois changer le rembourrage aux largeurs 1148px, 900px et 768px.
John McCann
34

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

changer votre première ligne de

.navbar.navbar-fixed-top

à

.navbar.navbar-default.navbar-static-top
catsky
la source
1
êtes-vous juste à la traîne? ou ai-je supervisé quelque chose?
chyno
Comment cela at-il obtenu 10 votes positifs? navbar-default ajoute juste de la couleur et de la couleur de fond ...
Denny Mueller
2
navbar-static-top est le changement et cela a fonctionné pour moi. Merci!
kevthanewversi
1
navbar-static-top l'a également corrigé. Le moins intrusif.
xpagesbeast
3
Cela fonctionne si vous n'avez pas besoin que la barre de navigation soit toujours visible en haut de l'écran. Le navbar-static-top n'est pas fixe, il défile avec l'écran. Cela illustre les différents styles de barre de navigation: getbootstrap.com/docs/3.3/examples/navbar-static-top
Victor Ionescu
26

Ce problème est connu et il existe une solution de contournement sur le site d'amorçage Twitter:

Lorsque vous apposez la barre de navigation, n'oubliez pas de prendre en compte la zone cachée en dessous. Ajoutez 40 pixels ou plus de rembourrage au <body>. Assurez-vous d'ajouter ceci après le CSS Bootstrap de base et avant le CSS réactif facultatif.

Cela a fonctionné pour moi:

body { padding-top: 40px; }
davidrac
la source
9
Mais lorsque vous minimisez la fenêtre, la barre de navigation apparaît après 40 pixels. Comment dois-je la gérer?
Aravindhan
1
oui, cette solution ne fonctionne pas bien sur les tailles d'écran mobiles. En fait, en mode écran large sur mon téléphone, cela rend le site inutile.
Tony Bathgate
quel CSS réactif en option? Je n'ai jamais utilisé qu'un seul CSS bootstrap (de base) - je parle au-dessus de la version 3.7.x UPWARDS; était-il divisé en différents CSS avant la version 3.7.x?
joedotnot
26

@Ryan, vous avez raison, le codage en dur de la hauteur le fera mal fonctionner en cas de barres de navigation personnalisées. Voici le code que j'utilise avec bonheur 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);         
});
Aram Paronikyan
la source
3
Au lieu d'utiliser parseIntsur les valeurs CSS de hauteur, je viens de l'utiliser $('#main-navbar').height(), mais sinon cela a été très utile et a résolu mon problème, merci.
tylerwal
À moins que votre barre de navigation soit à hauteur fixe, c'est ce dont vous avez besoin.
CraigP
21

Je mets ceci 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 hack nécessaire pour le faire fonctionner, et elle fonctionne également pour la navigation mobile.

EDIT - cela fonctionne beaucoup mieux:

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

Le problème est avec navbar-fixed-top, qui superposera votre contenu à moins de spécifier un rembourrage corporel. Aucune solution fournie ici ne fonctionne dans 100% des cas. La solution JQuery clignote / décale la page après son chargement, ce qui semble étrange.

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>
Tomas Kubes
la source
1
Oui, c'est mieux, car le rembourrage du corps est dynamique pour chaque taille d'écran, leur solution n'est pas bonne.
Ronen Festinger
Mais il y a ensuite une bande d'espace blanc vide au-dessus de la barre de navigation.
user2075599
16

Comme je l'ai posté 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 parfaitement sur toutes les tailles d'écran.

Jason Butler
la source
C'est ce que nous faisons .. place le contenu du corps exactement au bon endroit sans aucun code js, devinettes ou quoi que ce soit. .
FredArters
1
Thid mérite bien plus de votes positifs, fonctionne parfaitement bien, est moche comme l'enfer mais seul le code: D
JRsz
Merci, c'est une solution beaucoup plus élégante que le rembourrage supérieur ou les pixels de marge et tout ça ...
Pedro Reis
3
Malheureusement, cela ne fonctionne pas pour les mobiles, lorsque les navs entrent dans 1 colonne.
Pedro Reis
16

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

Il était temps qu'ils fassent cela correctement: D

Meule
la source
Certaines personnes peuvent utiliser le dessus fixe pour voir les liens lorsque vous faites défiler la page; bien que cette fonctionnalité puisse être utile si vous ne vous en souciez pas :)
knowledge_is_power
Notez également que .sticky-top utilise position: sticky, qui n'est pas entièrement pris en charge dans tous les navigateurs.
live-love
14

Toutes les solutions précédentes codent en dur 40 pixels spécifiquement dans le html ou le CSS d'une manière ou d'une autre. Que faire si la barre de navigation contient une taille de police ou une image différente? Et si j'ai une bonne raison de ne pas jouer avec le rembourrage corporel en premier lieu? Je cherchais 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 en pensent: veuillez partager vos réflexions. (Il sera refactorisé pour ne pas se répéter, btw.) Outre l'utilisation de jQuery, y a-t-il d'autres raisons de ne pas aborder le problème de cette façon? Je l'ai même fait fonctionner 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 en 3.x Tant que les noms de classe génériques resteront ... en fait, cela devrait fonctionner indépendamment du bootstrap, non?

EDIT: Voici une fonction jquery complète qui gère deux barres de navigation fixes empilées et réactives de taille dynamique. Il nécessite 3 classes html (ou pourrait 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'
        });
});
Ryan
la source
Juste pour info, je l'utilise et cela fonctionne très bien, mais pour une raison étrange, si j'ai deux barres de navigation, une taille normale et une pour les petits écrans, cela ne fonctionne que sur le plus grand?
NaughtySquid
@LiamDawe vous avez peut-être plus d'un '.user-top' (par exemple) sur la page, auquel cas le .height () pourrait devenir confus ...?
Ryan
14

Changez fixed-topavec sticky-top. De cette façon, vous n'aurez pas à calculer le rembourrage.
Et il fonctionne!!

Shivam Agrawal
la source
4
Selon BS4, cela devrait être la bonne réponse. +1
Pedro Sousa
11

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

Oliver Konig
la source
J'ai dû changer la deuxième référence à height dans votre exemple pour qu'elle soit $ ('# topnavbar'). Height () et cela a parfaitement fonctionné pour moi. Merci!
impitoyable
1
Merci pour le commentaire! Je l'ai corrigé dans la réponse.
Oliver Konig
C'est la meilleure solution que j'ai rencontrée qui fonctionne sur PC, iOS, Android - tous les appareils. Tous les autres sont des valeurs de pixels codées en dur ou trop longs et ne fonctionnent pas sur tous les appareils.
Oracular Man
Belle solution. J'avais de petits décalages qui n'étaient pas pris en compte dans le calcul. Je suppose que c'était parce que ma barre de navigation avait des marges. J'ai choisi de changer l'appel height () pour un appel externeHeight () à la place pour prendre cela en considération.
Leonardo Santos
4

pour Bootstrap 3. +, j'utiliserais le CSS suivant pour corriger navbar-fixed-top et le problème de chevauchement de 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; 
}
essence
la source
Même problème, belle réponse.
McGrady
2

utiliser cette classe à l'intérieur de la balise nav

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

Pour bootstrap 4

Kynginthenorth
la source
Je ne saurai jamais pourquoi il a été rejeté, car cela fonctionnait pour moi et pour tous les autres.
Kynginthenorth
C'est correct. Le seul problème est que, dans la documentation, il est dit "L'utilitaire .sticky-top utilise la position de CSS: sticky, qui n'est pas entièrement pris en charge dans tous les navigateurs"
José
1

Tout ce que tu dois faire est 

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

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

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

= 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 se trouve avant le corps CSS, elle ne prendra pas effet.

danielmbarlow
la source
0

Je ferais ceci:

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

Cela devrait garantir que le bloc de navigation ne s'étire pas vers le bas et couvre le contenu de la page.

développeur10
la source
-4

Je viens d'emballer la barre de navigation dans un 

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

Pas de pocus fantaisie mais ça a marché ..

TTbooster
la source
Votre réponse n'est pas claire et ne résout pas le problème. Qu'est-ce que cela nav-? ??représente?
fragilewindows