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