bootstrap navbar : overiding font color


Keywords:twitter  bootstrap 


Question: 

I want to change background color and font color of my bootstrap navbar, with a simple css code:

#mainNav {
        overflow: hidden;
        background-color: transparent;
    	color: #333;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
    }
    .navbar a{
    	color: #333;
    }

1 Answer: 

You are indeed targeting the elements correctly, and your rule for .navbar a is getting applied. The problem is that Bootstrap is providing higher specificity: .navbar-default .navbar-brand is overwriting .navbar a. As such, you can use .navbar-default a.navbar-brand to target the logo instead of .navbar a, providing higher specificity yourself.

Note that your #mainNav selector is indeed applying all of your custom rules.

This can be seen in the following example:

#mainNav {
  overflow: hidden;
  background-color: transparent;
  color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.navbar-default a.navbar-brand {
  color: #333;
  color: red /* To clearly showcase the override */
}
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>


<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand page-scroll" href=""><img src="" alt="logo" width="72" height="68" id="logo">
      </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 class="hidden">
          <a href=""></a>
        </li>
        <li>
          <a class="page-scroll" href="">services</a>
        </li>
        <li>
          <a class="page-scroll" href="">portfolio</a>
        </li>
        <li>
          <a class="page-scroll" href="">Sectors</a>
        </li>
        <li>
          <a class="page-scroll" href="">References</a>
        </li>
        <li>
          <a class="page-scroll" href="">About</a>
        </li>
        <li>
          <a class="page-scroll" href="">Team</a>
        </li>
        <li>
          <a class="page-scroll" href="">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>