Torne o conteúdo do NavBar do Bootstrap 3.0 sempre colapsado
Eu preciso fazer uma seção de um NavBar de Bootstrap 3.0 sempre recolhida.
Seções reais da barra de navegação:
LinksFormulário de pesquisaforma de loginQuando abro o site em um telefone, vejo as três seções recolhidas e tenho três ícones para recolher cada um desses conteúdos.
Quando abro a página em um PC, vejo as três seções na barra visíveis (não os botões a serem recolhidos). O que eu preciso? Na visualização do PC, apenas oculte o formulário de Login e mostre o botão para recolher o formulário de login. Não importa a resolução, eu preciso ter o botão de login sempre visível e a seção recolhida. Este é o meu código atual:
<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>