Bootstrap et son menu fixe

Travailler avec Bootstrap est d’une simplicité telle que l’on ne peut sans passer.

Malheureusement, Bootstrap ne pense pas à tout… Sinon, à quoi serviraient les développeurs 🙂

Pour le menu en position fixe, le contenu principale va se glisser sous le menu et créer ainsi un « glitch » visuel. Comment le fixer? Par css ou par JavaScript.

Le css est intéressant mais on se retrouve souvent avec des problèmes lorsque le contenu de menu est appelé à faire varier sa hauteur: Hauteur, redimensionnement de la fenêtre (responsive).

Vous aurez compris que j’ai opté pour le JavaScript. j’utilise aux travers mes projets une solution simple, facile à intégrer et qui sert à toutes les sauces. Voici le code :

$('#main').css({'margin-top': (($('.navbar-fixed-top').height()) + 1 ) + 'px'});

$(window).resize(function(){
  $('#main').css({'margin-top': (($('.navbar-fixed-top').height()) + 1 ) + 'px'});
})

Mon inspiration : http://stackoverflow.com/a/18053041/1765726

Publicités
Publié dans css3.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s