Problema con breakpoint en barra de navegación Bootstrap

Hola, tengo problemas con una barra de navegación de bootstrap. El punto es que tiene muchos botones por lo que necesito que cambie al icono mobile mucho antes de los 768 de resolución.

No se qué ni cómo modificar ya que estoy trabajando con la versión compilada.

Respuestas

La solución ideal sería poder modificar el valor de una variable en el LESS o Sass de Bootstrap, pero como dices que debes trabajar con la versión compilada de Bootstrap, vas a tener que seguir los pasos que se comentan en esta respuesta de StackOverflow.

En concreto, debes copiar los siguientes estilos en tu CSS:

@media (max-width: 991px) { /* <-- esta línea es la clave */
    .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;
    }
    /* necesario desde la versión 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

@javiereguiluz

10 diciembre 2015, 12:56

Gracias! ahi pude hacerlo funcionar.

@euge_molinero

26 febrero 2016, 21:43