Bootstrap : comment configurer vos Navbar en responsive design ?
Le framework Bootstrap permet de modifier les niveaux des seuils de changement d'affichage de la barre de navigation en fonction des tailles d'écran.
La barre de navigation s'affiche sur toute la largeur de l'écran dans le framework CSS Bootstrap. Lorsque qu'une taille d'écran minimale est atteinte, cette barre change d'affichage pour n'afficher que le menu en cours avec un bouton pour déplier sur la verticale le menu. Grâce à cette technique, l'affichage de la barre est adapté aux écrans plus petits, comme les smartphones. Par défaut, cette taille est la taille la plus petite en résolution de tablette (selon la configuration de Bootstrap), soit 768 px. Il est cependant possible de modifier cette table.
Le framework Bootstrap utilise Less, un préprocesseur CSS qui étend le langage CSS en ajoutant notamment des variables. La variable @grid-float-breakpoint détermine en dessous de quelle taille la barre de navigation change d'affichage. Si vous avez déjà installé et customisé Bootstrap, il faut recompiler Bootstrap en modifiant cette variable. Elle se situe dans le fichier variables.less. Modifiez cette variable en ajoutant l'une des variables déjà utilisées, par Bootstrap, par exemple @screen-desktop, la largeur pour la résolution minimale d'un écran d'ordinateur (992px) ou encore @screen-phone, la largeur minimum d'affichage sur un écran de smartphone (480 px). Vous pouvez également utiliser une taille directement écrite, par exemple 111 px.
Si vous pouvez repartir d'une nouvelle version de Bootstrap, allez sur la page http://getbootstrap.com/customize/ sur laquelle vous pouvez customiser les variables Less de Bootstrap, puis cherchez la variable @grid-float-breakpoint.
Que vous utilisiez l'une ou l'autre des méthodes, sachez que si vous fixez la valeur de la variable @grid-float-breakpoint à 1 px, cela désactivera la fonctionnalité de changement d'affichage de la barre de navigation.
Si vous ne souhaitez pas modifier directement Boorstrap, les lignes de CSS suivantes vous permettront de modifier le comportement de la barre de navigation pour qu'elle se réduise à la taille de votre choix.
@media (max-width: 123px) { /* Remplacez 123px par la taille de votre choix */
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* cette classe est à ajouter lorsque que vous utilisez une version de Bootstap supérieure ou égale à la 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}