Tenho um problema com o menu bootstrap quando ele está "colapsado". Quando o tamanho da tela é por exemplo de um mobile, ele fica com aquele botão para clicar e abrir o menu. O problema é que se eu deixo o tag <nav>
com a class navbar-default
quando o menu está aberto normalmente (em um desktop ou algo grande) ele fica com a cor da classe navbar-default
. Se eu retiro a classe navbar-default
quando o monitor do usuário é menor, então não aparece o botão, pois ele não tem um background para aparecer.
Eu gostaria que a classe navbar-default
só fosse ativa (com o background) se o menu for "colapsado". Se estiver do tamanho normal, então não deixa estilizado. Um exemplo é o site www.iped.com.br . Quando está em desktop (dimensão) então ele não aparece o menu collapsado (até ai tudo bem), quando deixamos o navegador em uma dimensão menor, então aparece o menu collapsado com estilo (background cinza claro), gostaria de fazer o mesmo. Meu código:
<div class="col-md-6" id="menu">
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu-collapse" class="collapse navbar-collapse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre nós</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Localização & Contato</a></li>
<li><a href="#">Orçamento</a></li>
</ul>
</div>
</nav>
</div>