Failing at changing the text color in Bootstrap navbar

Question

I've been trying to change the text color in a bootstrap template's navbar and have been unsuccessful. Anyone know where I'm going wrong? Here is my code.

<!--navbar-->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" id="nav-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Restaurant</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret">   </b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->

The CSS:

.navbar-inner {
    color: #FFF;
}

I also tried this:

#nav-inner {
    color: #FFF;
}

Answer 1

If you want to change the css for the tabs you need to add color: #ddd; to the following

.navbar .nav > li > a {
    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #ddd;
}

Hope it helps!!

Answer 2

My guess is that Bootstrap defines a more specific CSS rule that is winning out over your more general rule. You should examine the page with Firefox or Chrome's developer tools to see which styles are winning out over others. If your style doesn't even show up, then you know there's a more basic problem, but if Bootstrap's style is overriding your color, you have to give your style a higher precedence.

For a sanity check, try this overkill rule:

html body .navbar .navbar-inner .container {
    color: #FFF;
}

And if that works, then experiment with a lower level of specificity to see how specific you really need to get.

If all else fails, you can always do:

color: #FFF !important;

The CSS2 specification lays this out in detail.

Answer 3

.navbar .nav > li > a {
    float: none;
    color: #5FC8D6;
    background-color: #002E36;
}
.navbar .nav > li > a:hover {
    float: none;
    color: #002E36;
    background-color: #5FC8D6;
}