Нужно сделать так, чтобы в bootstrap 3 nav на маленьких размерах экрана(<768px) при нажатии на кнопку выпадающего меню
выпадающее меню отодвигало нижнюю часть контента, а не налезало на него, как в примере:
Вот код:
<nav class="navbar navbar-defaul " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">МЕНЮ</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">КАТАЛОГ</a></li>
<li><a href="#">ДИЛЛЕРАМ</a></li>
<li><a href="#">ЗАКАЗЧИКИ</a></li>
<li><a href="#">НОВОСТИ</a></li>
<li><a href="#">ОТЗЫВЫ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</nav>
Вот css-код:
.info {
width: 100%;
height: 750px;
background: url(../res/infobg.png) ;
background-position: center;
}
.info .menu{
height: 25px;
}
.menu ul {
width: 100%;
}
.menu ul li{
width: 14.28571428571429%;
}
.menu a {
text-align: center;
color: #fff;
font-family: 'Roboto', regular;
font-size: 18px;
}
.menu a:hover , .menu a:focus{
background-color:rgba(0,0,0,0.1) !important;
}
button.navbar-toggle {
background-color: white;
}
span.icon-bar {
background-color: #095C9F;
}
@media only screen and (max-width : 768px) {
.menu li {
width: 100% !important;
}