CODEWITHSUNDEEP
csstwitter-bootstrap
darkginger
darkginger

Reputation: 690

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)?

Upvotes: 0

Views: 5741

Answers (2)

Patrick Lee Scott
Patrick Lee Scott

Reputation: 8699

I would avoid using !important when possible. Instead try to make your selector more specific

.nav.navbar-nav .navbar-brand2 {
    color: white;
}

Or with less:

.nav {
    &.navbar-nav {
        .navbar-brand2 {
            color: white;
        }
    }
}

I have a boilerplate here that I use for creating easily maintainable bootstrap themes. Check out the instructions in the README.

https://github.com/patrickleet/bootstrap-override-boilerplate

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

Use important for changing default color

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

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

Upvotes: 3

Related Questions