CODEWITHSUNDEEP
csstwitter-bootstrap
jfoutch
jfoutch

Reputation: 1398

Failing at changing the text color in Bootstrap navbar

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

Upvotes: 12

Views: 46901

Answers (5)

maackle
maackle

Reputation: 2134

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.

Upvotes: 13

Daniel Raja Singh
Daniel Raja Singh

Reputation: 505

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

Upvotes: 2

Buddha
Buddha

Reputation: 1

nav.navbar-nav.navbar-right li a {
    color: blue;
}

Works like a charm! Found it on another thread, so am not taking credit for it.

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

It works... try it out.......

.navbar-nav > li > a:link
{
color:red;
}

Upvotes: 0

uday
uday

Reputation: 8710

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

Upvotes: 35

Related Questions