CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
James
James

Reputation: 1501

Bootstrap navbar background colour not overriding

I am simply trying to override the default colour of the default navbar using bootstrap, which I have done many times before, but it simply keeps displaying the default colour and I was wondering if I have done something stupid that someone else may be able to spot?

Any help is greatly appreciated.

HTML:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="style/site.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

.navbar-default {
    background-color: #900000;
}

Upvotes: 0

Views: 669

Answers (4)

Rajmohan Sakkarai
Rajmohan Sakkarai

Reputation: 11

.navbar-default {
    background-color: #900000 !impotant;
}

Upvotes: -1

David Wilkinson
David Wilkinson

Reputation: 5118

The easiest way of doing this is to use parent / child selectors to override BootStrap's styling as follows:

I assume you can use an element further up the tree:

<div class="wrapper">
      <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                </ul>
            </div>
        </div>
    </div>
 </div>

Then target it as follows:

.wrapper .navbar-default {
    background-color: #900000;
    background-image: none;
}

This works due to the law of specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Also make sure your custom CSS file is loaded AFTER BootStrap's...

EDIT: if your page has got a class appended to the <body> tag: 

<body class="standard">

You could even use that...

.standard .navbar-default {
        background-color: #900000;
        background-image: none;
    }

Upvotes: 1

tohood87
tohood87

Reputation: 728

I believe the background image was causing an issue, try just setting only the main background attribute:

.navbar-default {
  background: #900000;
}

Upvotes: 1

PHPExpert
PHPExpert

Reputation: 943

Just change your class

.navbar-default {
    background-color: #900000 !important;
    background-image: none;
}

Upvotes: 0

Related Questions