Changer le breakpoint de la navbar (bootstrap V3.1)

2017-01-01

web Hadock 2017-01-01

Il se peut que le breakpoint (le moment ou le menu change de forme pour s'adapter au écrans de tablette/smartphone) soit trop grand, ou même trop petit (par exemple si les liens sur le menu sont trop nombreux et le breakpoint pas assez petit, ils risquent de se superposer ce qui donnerait quelque chose de moche visuellement).

 

Pour changer ce breakpoint il faut se rendre dans le fichier css de bootstrap et repérer les lignes suivantes :

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

il suffira alors de remplacer la ligne suivante et de copier le code en entier dans votre fichier css (en effet il est déconseillé de modifier celui de bootstrap) :

@media (max-width: 1200px)

 

Un prochain article décrira comment faire pour la version 4 de bootstrap qui est actuellement en bêta (a priori cela se fera plus simplement via une classe "navbar-toggleable-*" et "hidden-*").