Changer le break point du menu Bootstrap

Pour un projet de templating wordpress, avec un menu bootstrap 3 intégré, j’ai cherché une solution pour changer le break point du menu bootstrap 3. Par défaut, le menu se rétracte et devient « responsive » à 768px, mais j’ai trouvé deux snippets css contenant les classes à modifier.Vous pouvez fixer les break points des media queries à la taille voulue.

source

Jusqu’à bootstrap 3.0

@media (max-width: 990px) {
    .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;
    }
}

Pour bootstrap 3.1

@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;
	}
}

Si jamais avec ce bout de code vous avez un bug au niveau du menu déroulant en version mobile, vous pouvez ajouter le bout de code suivant, et vous verrez en principe tous vos onglets s’afficher correctement.

    .navbar-collapse {
max-height:100%;}

22/01/2015 Mis à jour le 27/12/2018 Par Copier coller | Dans CSS