David David - 6 months ago 28
CSS Question

Bootstrap dropdown-toggle class - changing background colors when option is active

I have a navbar menu using bootstrap. One option is a dropdown. When this option is clicked a grey background color comes up. How can I override this using CSS?

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class ="navbar-tggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" style="color: #bcc6cc;" class="navbar-brand"><img src="images/logo.png" alt="Tampa Bay Developers" id="tbdLogo">Tampa Bay Developers</a>
</div>
<div class="collapse navbar-collapse" id="collapsedNav">
<ul class="nav navbar-nav">
<li class="active2"><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Articles</a></li>
<li><a href="#">Related Sites</a></li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-default navbar-btn navbar-right">Contact Us</button>
</div>
</div>
</nav>

Answer

CSS:

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  background: red;
}