How can I change the default background color of the nav bar?

Question

How can I change the default background color of the nav bar? In my html I have this code but the page doesn't render this, it sticks to the default bootstrap css. Here is my live test page http://andrewsamonas.com/ and it shows the default inverse dark navbar not my navbar-custom one. I googled a lot and that's how I found to use navbar-custom

this is what I added to my style.css:

.navbar-custom {
    background-color: #CC0000;
    border-color: #AA0000;
    border-radius: 0;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: #AA0000;
}

.navbar-custom .navbar-text {
    color: #FFF;
}

.navbar-custom .navbar-toggle {
    border-color: #AA0000;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #FFF;
}

 this is in the html head

<link rel="stylesheet" href="css/styles.css">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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


this is the navbar part 
<div class="navbar navbar-inverse navbar-fixed-top"> 
  
<div class="container">
  
<div class="navbar-header">
<a href="#" class="navbar-brand">My Site</a>

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  </div>
  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>


        <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

        <ul class="dropdown-menu">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>                 

        </ul>


        </li>
      </ul>
    </div>

</div></div>


        <div id="push"></div>

You need to place your stylesheet after Bootstraps in order for your styles to work: **bootstrap.css**, then **styles.css**. — vanburen, Jan 31 '17 at 04:42

score 0 · Answer 1 · answered Jan 31 '17 at 01:22

0

You haven't actually applied the navbar-custom class anywhere in your HTML. Add it to the end of the class list on the div with the class navbar.

<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">

answered Jan 31 '17 at 01:22

Soviut

88,194
49
192
260

that didn't work, I just added it and re-uploaded my page with it here http://andrewsamonas.com/ – mlegg Jan 31 '17 at 01:29

score 0 · Answer 2 · answered Jan 31 '17 at 01:26

0

Change

<div class="navbar navbar-inverse navbar-fixed-top">

To

<div class="navbar-custom navbar-fixed-top">

answered Jan 31 '17 at 01:26

Shank

1,387
11
32

That worked to change it to my custom color but now my drop down menu under LOGIN doesn't work. – mlegg Jan 31 '17 at 01:34

score 0 · Answer 3 · answered Jan 31 '17 at 02:12

0

No need to change the classes. Just need to give your selector a higher specificity than the current "dominating" one:

.navbar.navbar-inverse {
background-color: #CC0000;
}

This will overrule the standard background.

EDIT: If for any reason you prefer using navbar-custom, you'll have to add this class to the element and STILL make your selectors with a higher specificity. E.g.:

.navbar.navbar-custom { }

answered Jan 31 '17 at 02:12

ZKA

340
1
10

I got the navbar color to change but now my dropdown menu doesn't work. – mlegg Jan 31 '17 at 15:41
It's not working in the original code snippet you posted, either. It can't be due to the newly changed background colour. To help you, I'd need to see the code that hides/displays the dropdown. That seems to be handled by a javascript function. – ZKA Jan 31 '17 at 20:19
I've scrapped this navbar and started all over from scratch slowly changing on a line or two of code at a time and saving the original. thanks – mlegg Feb 01 '17 at 00:42

How can I change the default background color of the nav bar?

3 Answers3