Добрый день. Подскажите пожалуйста по настройке компонента Bootstrap Navbar.
При нажатии в меню на раздел с выпадающим списком меняется фон данного раздела. Подскажите, как сделать чтобы фон остался без изменений (на примере раздела «Письменные переводы»).Прилагаю свой код:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Главная</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Письменные <br /> переводы
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span>Перевод документов<span></a></li>
<li class="divider"></li>
<li><a href="#">Перевод</a></li>
<li><a href="#">Перевод</a></li>
<li><a href="#">Перевод</a></li>
</ul>
</li>
</ul>
</div>
CSS:
.navbar-default {
background-color: transparent;
border-color: transparent;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.navbar-nav {
margin-top: 40px;
float: right;
}
@media screen and (max-width: 767px) {
.navbar-nav {
float: none;
text-align: center;
background: rgba(25, 33, 60, 0.5);
}
}
.navbar-default .navbar-brand {
margin-top: 40px;
font-size: 28px;
font-family: 'Philosopher', sans-serif;
color: #fff;
letter-spacing: 1px;
-moz-transition:color .5s ease-in;
-o-transition:color .5s ease-in;
-webkit-transition:color .5s ease-in;
}
.navbar-default .navbar-brand span {
color: #42a5f6;
-moz-transition:color .5s ease-in;
-o-transition:color .5s ease-in;
-webkit-transition:color .5s ease-in;
}
@media screen and (max-width: 400px) {
.navbar-default .navbar-brand {
font-size: 22px;
font-family: 'Alice', serif;
}
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand span:hover {
color: #3D99B8;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 14px;
font-family: 'Philosopher', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #42a5f6;
}
.navbar-default .navbar-nav>li>a:focus {
color: #42a5f6;
}
.navbar-default .navbar-toggle {
margin-top: 40px;
border: none;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background: none;
}
.navbar-default .navbar-toggle .icon-bar {
height: 4px;
width: 28px;
background: #42a5f6;
}
.navbar-default.shrink {
background:rgba(25, 33, 60, 0.8)
}
.navbar-default.shrink .navbar-nav {
margin-top: 20px;
margin-bottom: 10px;
}
.navbar-default.shrink .navbar-brand {
margin-top: 20px;
}
.navbar-default.shrink .navbar-toggle {
margin-top: 25px;
}
.navbar-default .navbar-nav .dropdown ul {
background:#ffff
}
.navbar-default .navbar-nav .dropdown>ul>li>a {
font-size: 14px;
font-family: 'Philosopher', sans-serif;
letter-spacing: 1px;
color: #42a5f6;
}