Bootstrap nav menu hover color

Question

Я пытаюсь изменить цвет навигационного меню на один час, но я не смог этого сделать. Я не могу найти атрибут hover в css для меню.

Вот страница: http://jazbinasolutions.com/rooney

При наведении курсора на верхних звеньях меню вы увидите, что они становятся белыми и на самом деле быть невидимым.

Любая помощь будет оценена по достоинству.

Благодаря

Answer 1

Это код, который вы хотите изменить:

.navbar-inverse .navbar-nav>li>a:hover { 
    color: #fff; 
    background-color: transparent; 
} 

Вы должны использовать более конкретные правила, чтобы переопределить его:

.navbar.navbar-inverse.navbar-fixed-top .navbar-nav>li>a:hover { 
    color: #000; 
} 

Answer 2

Это ваш точный код с специфических селекторов, вы не (и не должны использовать! важно, если это не полностью оправдано). Вы также должны рассмотреть использование пользовательских классов при изменении структуры.

См. Рабочий пример в фрагменте.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.navbar.navbar-custom { 
 
    background: white; 
 
} 
 
.navbar.navbar-custom { 
 
    min-height: 85px; 
 
} 
 
.navbar.navbar-custom #bs-example-navbar-collapse-1 { 
 
    padding-top: 22px; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a:hover, 
 
.navbar.navbar-custom .navbar-nav > li > a:focus { 
 
    color: #333333; 
 
    background-image: none; 
 
} 
 
.navbar.navbar-custom { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <!-- Navigation --> 
 
    <nav class="navbar navbar-inverse navbar-custom navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" href="index.html"> 
 
      <img src="http://www.jazbinasolutions.com/rooney/images/ElregLogo2.png" /> 
 
     </a> 
 

 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> <a href="index.html">Home</a> 
 

 
      </li> 
 
      <li> <a href="about_us.html">About Us</a> 
 

 
      </li> 
 
      <li> <a href="projects.html">Projects</a> 
 

 
      </li> 
 
      <li> <a href="kompetanse.html">Kompetanse</a> 
 

 
      </li> 
 
      <li> <a href="contact.html">Kontakt</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
    </nav> 
 
</div>