Estou colocando o navbar
do Bootstrap em um site, só que quando clico no botão para abrir o menu, o menu aparece atrás do banner que tem no site. Tirei o position:absolute
que tem no col-md-12
e ele ficou em cima (da forma correta), mas queria saber se tem outra alternativa, pois acho que tirar o position
não é a maneira mais certa a se fazer.
Print:
Meu código
<div class="row-fluid bg-top">
<div class="col-md-2">
<img src="assets/images/logo.png" class="img-responsive" border="0">
</div>
<div class="col-md-3">
<div class="navbar-header navbar-default navbar-inverse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav role="navigation" class="navbar">
<div id="menu" class="collapse navbar-collapse">
<ul>
<li><a href="">a empresa</a></li>
<li><a href="">máquinas</a></li>
<li><a href="">insumos</a></li>
<li><a href="">cápsulas</a></li>
<li><a href="">soluções</a></li>
<li><a href="">contato</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-md-3">
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<div id="contatos">
<p>atendimento@makecoffee.com.br</p>
<p>11 2356-6566 | 11 2356-6568 <img src="https://bmwkids.s3.amazonaws.com/app/uploads/2015/02/OrangePhone.png" style="width:8%"></p>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="100" data-show-faces="false" data-share="false"></div>
</div>
</div>
</div>