ナビゲーションバーのデフォルトの背景色を変更するにはどうすればよいですか？

Question

ナビゲーションバーのデフォルトの背景色を変更するにはどうすればよいですか？私のHTMLではこのコードがありますが、ページはこれをレンダリングせず、デフォルトのブートストラップCSSに固執しています。ここに私の生のテストページhttp://andrewsamonas.com/があり、それはデフォルトの逆暗いnavbarが私のnavbar-customものではないことを示しています。私は多くのことをGoogleで検索し、それは私がナビゲーションバー-カスタムを使用することが分かっ方法

だこれは私が私の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>

Answer 1

あなたが実際にどこかでnavbar-customクラスを適用していませんあなたのHTML。クラスnavbarのdivのクラスリストの末尾に追加します。

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

Answer 2

変更

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

へ

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

Answer 3

クラスを変更する必要はありません。 はちょうどあなたのセレクタ現在の「支配」よりも高い特異性を与える必要があります。

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

これは、標準的なバックグラウンドを却下します。

編集：何らかの理由でnavbar-customを使用したい場合は、このクラスを要素に追加する必要があります。また、セレクタを高い特異性で作成する必要があります。例：

.navbar.navbar-custom { }