background-color rule getting overridden - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
June 11, 2015 at 12:50 pm #203607
Russell
Participant
Hello:

I’m having problems changing the background-color of the navbar at the top of the page on this site:

http://testing001.compoundeyedesign.com/test.html

… It’s currently a grey. I look at it in Chrome developer tools and I can tell that it’s taking this color from a rule in the stylesheet bootstrap.min.css:
```
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
```
That’s understandable, but I can’t override it. In another stylesheet ‘style.css’ which is linked to from this HTML page, I have this rule:
```
.navbar-default {
  background-color: #F8B200;
}
```
That’s supposed to be the yellow I want.

So why Chrome isn’t picking up this rule, I don’t know. The ‘style.css’ sheet is the last one listed in the <head> of the HTML file, so I assumed that’d take priority.

I know I can just plop the CSS in the head of the HTML file itself, but this anomaly is causing me other issues well so best to get it sorted. I could also just overwrite the bootstrap.min.css file, but I’m planning that one day this may get replaced by a newer version of Boostrap, and that would undo my edit.

I’m sorry I didn’t copy this all over into Codepen, but there are so many rules affecting the .navbar-default that I thought it’d be easier to see it in context.

Thanks in advance for any suggestions.

Russell
June 11, 2015 at 1:15 pm #203608
Ryan Yurkanin
Participant
Hi Russell,

I’m looking in the chrome dev tools, and I can’t even see an attempted styling of navbar-default coming from your styles.css. I only see an attempted styling on navbar-static-top.

So I believe this is one of two problems.
1. Perhaps, you misspelled the class name or it is accidentally nested in a way that the actually css selector isn’t pointing at what you think it is.
2. Perhaps, you are suffering from a specificity problem. You could attempt this selector too see if you have better results.
```
.navbar-default.navbar-static-top { 
  background-color: @navbar-color; 
}
```
Let me know how this goes for you!
June 19, 2015 at 10:44 am #204009

Russell
Participant

Hi guys:

Sorry for the slow reply. It’s just been a busy work week. @Ryan Yurkanin: your reply worked straight away. However, I’m not totally clear how it works.

Is this a bootstrap capability to use @navbar-color as a value? How does it know I’m referring to the yellow in .navbar-default? I guess this is a little foggy.

OK, thanks guys for your help!

R
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.