1

I'm trying to change the color of the link with the class "navbar-brand" in my Bootstrap website. No matter how I structure my css selector I can't seem to change the text color. However, I know the css is being loaded because I'm able to change the background color of the navbar. Here is the shortened code:

My index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Foobar Brand</a>
        </div>
      </div>
    </div>
  </body>
</html>

My main.css:

    // change the color of the navbar to a dark blue
    .navbar {
        background-color: #3c4c66;
    }

    // some of the selectors I've tried to get the text to be white.
    // why are they not working?
    .navbar-brand {
        color: white;
    }

    .navbar-header a {
        color: white;
    }

    a {
        color: white;
    }

End result: a dark blue bar with the gray text that came with the default navbar. Thanks for your help.

Edit: the similar question here didn't help me. I was able to change the elements of the navbar-nav, but not the navbar-brand.

Edit 2: In response to Abhinav Guaniyal's comment, I inspected the element in Firefox. Indeed, somehow the .navbar-brand rule in Bootstrap is overriding (sorry if that is the wrong term) the .navbar-brand in my css file. Why is this? Shouldn't my css file override Bootstrap's since I linked main.css after Bootstrap?

Improve this question
10
  • use firefox/<browser's> inspect element (right click -> inspect element) tool to see what styles are being applied and what styles are being ignored and why. Commented Jun 8, 2015 at 14:39
  • 1
    use !important for your code Commented Jun 8, 2015 at 14:40
  • 1
    Have you tried putting !important after the css. This will overwrite everything. example. color: white !important; Commented Jun 8, 2015 at 14:41
  • 2
    don't use !important, if it is not really needed ;) use exact the same css selectors as bootstrap to override the styles. Commented Jun 8, 2015 at 14:41
  • 1
    @APAD1 Oops, I missed the .navbar-default. Thank you for clarifying. Commented Jun 8, 2015 at 14:59

2 Answers 2

Reset to default
2

Bootstrap's

.navbar-default .navbar-brand {

is more specific than your

.navbar-brand {

and

.navbar-header a {

You want to keep your code more specific.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This explains the issue. I missed the .navbar-default. Thank you for the explanation.
1

Try something like this:

.navbar .container .navbar-header a.navbar-brand {
    color: white;
}

Think of it this way. Imagine you have 10 different places in your code where you use <a class="navbar-brand">link</a>. Using .navbar-brand{ color:white } in your CSS will work on all 10 of those a tags. If you decide that you want to apply a different style in 1 of those 10 places without affecting the other 9, rather than having to delete the CSS rule entirely or add an extra id/class, you can override just the one you want by being more specific. The browser recognizes that you were more specific and assumes you want the more specific style to override the generic style.

Improve this answer

5 Comments

This worked. Can you please explain why making the css more specific worked while the general case doesn't?
That is exactly what specificity does. To (over)simplify, this selector contains more elements and classes than yours, so it overrides the Bootstrap styles, while yours doesn't.
@MrLister Thank you for clarifying. I was under the impression that the order you load the style sheets automatically determines which style sheet has the final say. Is this not the case?
@spfrommer: No, that only applies if your rules have the same specificity.
I edited the answer to better explain it. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.