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?

Community
  • 1
  • 1
psychicmachinist
  • 158
  • 7
  • use firefox/ inspect element (right click -> inspect element) tool to see what styles are being applied and what styles are being ignored and why. – Abhinav Gauniyal Jun 08 '15 at 14:39
  • 1
    use `!important` for your code – Akhil Namboothiri Jun 08 '15 at 14:40
  • 1
    Have you tried putting !important after the css. This will overwrite everything. example. color: white !important; – Sari Rahal Jun 08 '15 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. – Juergen Gutsch Jun 08 '15 at 14:41
  • There are very few cases when one should use the `!important` directive, this is not one of them. Use the correct specificity. – APAD1 Jun 08 '15 at 14:42
  • `!important` is a useful debugging tool. If the site works with `!important`, but not without, the issue is one of specificity. If not, something else is going on. The ultimate goal is to have everything work without any `!important`s, however. – Mr Lister Jun 08 '15 at 14:43
  • @Jürgen The Bootstrap css rule uses the same selector I do (".navbar-brand") from what I can tell in Firefox. Why is mine being overridden? – psychicmachinist Jun 08 '15 at 14:53
  • @spfrommer It seems you are right. Anyway try to be exact as possible with the selectors like Sam proposed in one of the answers. !important should be the last options to avoid a !important hell. – Juergen Gutsch Jun 08 '15 at 14:57
  • Because bootstrap's rule is more specific than just `.navbar-brand`. It's `.navbar-default .navbar-brand` You need to match the specificity or make your selector more specific in order to override Bootstrap. – APAD1 Jun 08 '15 at 14:57
  • 1
    @APAD1 Oops, I missed the `.navbar-default`. Thank you for clarifying. – psychicmachinist Jun 08 '15 at 14:59

2 Answers2

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.

MMM
  • 7,221
  • 2
  • 24
  • 42
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.

TheIronCheek
  • 1,077
  • 2
  • 20
  • 50
  • This worked. Can you please explain why making the css more specific worked while the general case doesn't? – psychicmachinist Jun 08 '15 at 14:51
  • 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. – Mr Lister Jun 08 '15 at 14:54
  • @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? – psychicmachinist Jun 08 '15 at 14:57
  • @spfrommer: No, that only applies if your rules have the same specificity. – MMM Jun 08 '15 at 14:59
  • I edited the answer to better explain it. Hope it helps. – TheIronCheek Jun 08 '15 at 15:10