I need to make a section of a NavBar of Bootstrap 3.0 always collapsed.
Actual sections of the navbar:
When I open the website in a phone I see the three sections collapsed and I have three icons to collapse each of this content.
When I open the page in a PC i see the three sections in the bar visibles (not the buttons to collapse). What I need? In PC view only hide the Login form and show the button to collapse that login form. No matter the resolution i need to have the login button always visible and the section collapsed. This is my actual code:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<!--Toggles -->
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#sesion">
<span class="glyphicon glyphicon-user"></span>
</button>
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#links" id="menuToggle">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#buscar">
<span class="glyphicon glyphicon-search"></span>
</button>
<!--Logo en vista Mobile -->
<a class="navbar-brand" style="padding: 10px 0 0 15px" href="#">
<span class="visible-xs">
<img src="img/nsnow.png" width="37" height="36" alt="Logo" />
</span>
</a>
</div>
<ul class="collapse navbar-collapse nav navbar-nav" id="links">
<!--Links -->
<li><a style="padding-left: 40px"></a></li>
<li class="botonMenu" id="boton_generos"><a >Géneros</a></li>
<li class="botonMenu" id="boton_categorias"><a >Categorías</a></li>
<li class="botonMenu" id="boton_senales"><a >Señales</a></li>
</ul>
<div class="collapse navbar-collapse" id="buscar">
<!--Buscar -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn boton">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
<div class="collapse navbar-collapse" id="sesion">
<!--Buscar -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Usuario">
<input type="text" class="form-control" placeholder="Contraseña">
</div>
<button type="submit" class="btn boton">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</nav>
For those using LESS, head to variables.less
and change:
@grid-float-breakpoint: @screen-sm-min;
to:
@grid-float-breakpoint: 999999999px;
One line change that works like a charm. Just be sure to use an unrealistically large number of pixels (em did not work for me).