Estoy usando el siguiente navbar:
Y estoy teniendo este problema:
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:
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.
min-width
@media screen and (max-width: 769px){ /* aplicas para tu lista (<ul class="nav navbar-nav navbar-right">), display: none; */ /* aplicas para el botón de menú (No lo veo en tu código html) con tu otra lista, display: block, display: inline-block; vertical-align: middle; min-width: El porcentaje que quieras (Ejm: 20%); */ }
es la idea básica