Настроить Bootstrap Navbar Tab Color

Question

Я работаю над своим первым проектом начальной загрузки, у меня возникли трудности с внесением изменений в навигационную панель, я провел несколько часов исследований, но я продолжаю пустую по одному предмету в частности. Когда щелкнул элемент списка, который был обведено кружком на изображении ниже, он становится стандартным серым бутстрапом, я хочу, чтобы он соответствовал цвету фона, черный.

И хотя я прошу, я также хотел бы изменить цвет в выпадающем меню.

Вот моя разметка:

<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand"> 
       <img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img> 
      </a> 
     </div> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Home</a></li> 
       <li class="dropdown"> 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a> 
         <ul role="menu" class="dropdown-menu"> 
          <li><a href="#">Suspension Kits</a></li> 
          <li><a href="#">Light Bar Mounts</a></li> 
          <li><a href="#">Custom Fabrication</a></li> 
         </ul> 
       </li> 
       <li class="dropdown"> 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a> 
         <ul role="menu" class="dropdown-menu"> 
          <li><a href="#">Tacoma</a></li> 
          <li><a href="#">Bronco</a></li> 
          <li><a href="#">Hot Rods</a></li> 
          <li><a href="#">Everything Else</a></li> 
         </ul> 
       </li> 
          <li><a href="#">Contact Us</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

Вы хотели бы изменить цвет вкладки на фокус. Стиль раскрывающегося списка управляется классом .dropdown-menu и его классами потомков.

.navbar-default .navbar-nav > .open > a:focus { 
 
    background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */ 
 
    color: #fff !important; 
 
} 
 
.dropdown-menu { 
 
    background: lightblue !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg"> 
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="#" class="navbar-brand"> 
 
     <img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"> 
 
     </a> 
 
    </div> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a> 
 
      <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#">Suspension Kits</a> 
 
      </li> 
 
      <li><a href="#">Light Bar Mounts</a> 
 
      </li> 
 
      <li><a href="#">Custom Fabrication</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a> 
 
      <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#">Tacoma</a> 
 
      </li> 
 
      <li><a href="#">Bronco</a> 
 
      </li> 
 
      <li><a href="#">Hot Rods</a> 
 
      </li> 
 
      <li><a href="#">Everything Else</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>