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?
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.
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;
}
}
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.
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">
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);
});
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.
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; }
Le bootstrap v4 modèle de démarrage css utilise:
body {
padding-top: 5rem;
}
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" />
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.
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
Deux problèmes vont se passer ici:
<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! -->
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);
});
})
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">
vous devriez ajouter
#page
{
padding-top: 65px
}
ne pas détruire un pied collant ou autre chose
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.
<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;
}