탐색 표시 줄의 기본 배경색은 어떻게 변경합니까?

Question

탐색 표시 줄의 기본 배경색은 어떻게 변경합니까? 내 HTML 에서이 코드를 가지고 있지만 페이지가 렌더링되지 않습니다, 그것은 기본 부트 스트랩 CSS를 막대기. 여기에 내 라이브 테스트 페이지 http://andrewsamonas.com/이 있으며 내 navbar-custom이 아닌 기본 역상 네비게이션 바를 보여줍니다.

.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 클래스를 적용하지 않은 :

이 내있는 style.css에 추가 된 것입니다 내가 많이 봤 그리고 내가 네비게이션 바 - 사용자 정의를 사용하는 것으로 확인 방법 귀하의 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 { }