Bootstrap navbar - can't change font color

Question

So for some reason I can't change font color of my Bootstrap navbar - it keeps appearing blue. I've tried changing the background color of the navbar but with the same result. It was OK (white) until I set the background color to 'transparent' for the navbar to look the way I wanted it to look, but I thought it won't be a problem to change it later on so I didn't pay attention to it. Thanks for your response.

CSS

.navbar {

position:absolute;
top:25px;
z-index:10;
width:100%;
background-color: transparent;
padding-right: 20px;
font-family: 'Droid Sans', sans-serif;
font-size: 17px; 
color: white;
}

HTML

<div class="bannerContainer">
<nav class="navbar">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand">Brand</a>
</div>    
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <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="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
          </ul>
        </li>
    <li><a href="#">Link</a></li>
  </ul>
</div><!--/.nav-collapse -->
</nav>

Solution 1

That's because this rule :

a {
    color: #428bca;
    text-decoration: none;
}

To override it, use this CSS :

.navbar a {
    color: white;
}

Solution 2

Try with !important

color: white !important;

Solution 3

You need to use this property

.navbar-nav>li>a {
 color : //desired color here
}

in case of inverse navbar

.navbar-inverse .navbar-nav > li > a {
  color : //desired color here
}

Solution 4

Advice to use bootstrap is always good to be well specified in your CSS. for example the color of your font you can change it to directly

a{
  color: white 
}

but there are cases that the specificity of Bootstrap is higher and does not let you change it even if you put "!important". In that case it is better to attack the "a" where it is relatively For example.

.navbar a{
  color: white 
}

View more solutions

Comments

[Michael_L]

Thanks ! That's exactly what I needed.

[Michael_L]

Thanks, this one works the same way. Now I know where I made the mistake

[Michael_L]

Thanks for the effort !

[Tom Stickel]

color: white !important; - This is probably needed.

[zessx]

If you're using !important, you're doing it wrong.