CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfonts
Michael_L
Michael_L

Reputation: 43

Bootstrap navbar - can't change font color

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>

Upvotes: 4

Views: 34356

Answers (4)

elmauro
elmauro

Reputation: 39

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 
}

Upvotes: 1

BK004
BK004

Reputation: 392

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
}

Upvotes: 3

zessx
zessx

Reputation: 68790

That's because this rule :

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

To override it, use this CSS :

.navbar a {
    color: white;
}

Upvotes: 11

neno
neno

Reputation: 303

Try with !important

color: white !important;

Upvotes: 4

Related Questions