Modificar dimensiones responsivas del bootstrap 3 navbar

publicado por: Anonymous

Estoy usando el siguiente navbar:

introducir la descripción de la imagen aquí

Y estoy teniendo este problema:

introducir la descripción de la imagen aquí

Se puede ver que por la cantidad de elementos que tiene el navbar, cuando voy achicando la resolución de la pantalla, los elementos que están alineados hacia la derecha, se pasan para abajo.

Necesito evitar eso, haciendo que la aparición de esto:

introducir la descripción de la imagen aquí

ocurra antes del problema expuesto.

El código:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Las Holass</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Hooola Holaaa!</a></li>
        <li><a href="#">holahola</a></li>
        <li><a href="#">Hooola hola!</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-hover" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Holita
          <i class="glyphicon glyphicon-user white"></i>
          </a>
          <ul class="dropdown-menu">
            <li><a id="login" href="#">Cerrar Sesión</a></li>
          </ul>
        </li>
        <li><a href="#">Hooola Holas</a></li>
        <li><a href="#">hoola holaaa</a></li>
      </ul>
    </div><!-- fin navbar-collapse -->
  </div><!-- fin container-fluid -->
</nav>

Hay alguna forma de definir la anchura mínima en píxeles desde la cual aparecerá el botón de las tres barras blancas que comprime el contenido del navbar?

EDIT

Lo que necesito es establecer la anchura máxima* desde la cual aparecerá el botón señalado anteriormente, no la mínima como describí erróneamente.

Por ejemplo, si actualmente ese botón aparece entre 0px y 765px de ancho, necesito que aparezca entre 0px y 769px de ancho.

solución

Cambie el punto de interrupción de la barra de navegación desde 1000px al punto de interrupción deseado, donde desea que la barra de navegación se contraiga

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

La solucion la encontre aqui: https://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less/36289507#36289507

Algun ejemplo: http://www.bootply.com/j7XJuaE5v6

Saludos, espero te sirva.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *