darkginger darkginger - 4 months ago 20
CSS Question

Overriding Bootstrap to change color of navbar links

I am so confused over why I am unable to change the font's

color
property in a navbar in my Rails app that is using Bootstrap 3. I currently have a class set up called
navbar-brand2
that is modifying other link properties successfully (like creating a border), but I am unable to change the color itself.

CODEPEN



header.html.erb

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Home Page</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="whatever"><a class="navbar-brand2" href="#">Contact</a></li>
<li class="whatever"><a class="navbar-brand2" href="#">About Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>


Partial CSS

.navbar-brand2 {
font-family: 'Londrina Solid', cursive;
color: white;
font-size: 1.6em;
letter-spacing: 1.5px;
padding-left: 13px;
padding-right: 13px;
margin-top: 12px;
border: white 2px solid;
border-radius: 12px;
margin-right: 10px;
}

.navbar-brand2 a {
color: #F5F5F5; ;
}

.navbar-brand2:hover {
color: #E4491C;
border-color: #E4491C;
text-decoration: none;
}


Other Things I've Tried

I thought maybe I needed to directly reference the
<a>
tag in my CSS, so I added this as well:

.navbar-brand2 a {
color: white;
font-weight: bold;
}


Same issue though. I have not seen anything in the documentation or other answers: do I need to do something special to override the default color (meaning my strategy by defining a class will never work for this one, specific property)?

Answer

Use important for changing default color

.navbar-brand2 {
    color: white !important;
}

http://codepen.io/nagasai/pen/vKjgwZ

Comments