I'm developing a web application and when it arrives in the width of the page min-width: 640px
and max-width:770px
it presents the menu for movable devices of the bootstrap, but would like to leave the menu with that visual.
ButI'mnotabletonarrowdownthewidthofthemenuandplaceitnexttothesearchfield.
HTML
<divclass="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="conteudo"><li><a href="#">Pagina Principal</a></li></div>
<div class="conteudo"> <li><a href="#">Contato</a></li></div>
<li class="dropdown">
<div class="conteudo"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos <b class="caret"></b></a></div>
<ul class="dropdown-menu">
<li><a href="#">Camisetas</a></li>
<li class="divider"></li>
<li><a href="#">Calças</a></li>
<li class="divider"></li>
<li><a href="#">Bermudas</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
@media screen and (min-width: 340px) and (max-width:640px) {
#imagem_principal{
width: 100%;
margin-left: 210px;
}
.busca{
margin-top: 80px;
margin-left: 110px;
position:relative;
}
#campo_busca{
width: 230px;
}
.menu_superior{
display: none;
}
.header-fixed{
display: block;
}
.menu_2{
display: none;
}
}