The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background-color rule getting overridden

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #203607


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

    … 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.


    Ryan Yurkanin

    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!


    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!


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.