Customize Bootstrap Navbar Tab Color

Question

I'm working on my first bootstrap project, I'm having some difficulty making changes to the navbar, I've spent a few hours researching but I keep coming up blank on one item in particular. When clicked the list item that is circled in the below image turns the standard bootstrap grey, I want it to match the background color, black.

And while I'm asking I would also like to change the color on the dropdown as well.

Here is my markup :

    <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>

possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) — unrivaledcreations, Jul 31 '15 at 05:04
Just change background color of ".dropdown-menu" class in bootstrap.css — Vasimkhan, Jul 31 '15 at 05:10

score 1 · Answer 1 · answered Jul 31 '15 at 05:08

You would want to change the tab color on focus. The dropdown style is controlled .dropdown-menu class and its descendent classes.

.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>

Customize Bootstrap Navbar Tab Color

1 Answers1