• Bootstrap
  • CSS

Как сделать, чтобы не изменялся фон выпадающего меню Navbar?

Добрый день. Подскажите пожалуйста по настройке компонента 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;
}

Комментарии: 2

Александр Мальцев
Александр Мальцев
Установите свойству background-color значение inherit или transparent:
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  background-color: inherit;
}
Наталья
Наталья
Благодарю, все получилось.