navbarが崩壊すると背景色を変更する方法

折り畳まれたNavbarの背景色を変更するにはどうすればよいですか？navbarが崩壊すると背景色を変更する方法

.navbar{ 
    background-color: #A9B7C0; 
    border-bottom-color: #EFD9C1; 
} 

.navbar-inverse { 
    background-color: #A9B7C0 !important; 
} 

.container .navHeaderCollapse .nav li a { 
    color: #EFD9C1; 
} 

.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a { 
    color: black; 
} 

.navbar .navbar-brand{ 
    color: #EFD9C1; 
} 
.navbar .navbar-brand:hover{ 
    color: #EAC67A; 
} 

.collapse .nav .active a{ 
    color: #A9B7C0 !important; 
    background-color:#EFD9C1; 
} 

.collapse .nav .active a:hover{ 
    background-color:#EFD9C1; 
    color: #A9B7C0; 
} 

body { 
    background-color: #CCCBC6; 
    color:white; 
} 

@media screen and (max-width: 375px) { 
    .fullName{ 
    display:none; 
    } 
}

ダウン倒壊または圧縮モードに戻ってのアクションはまだ進行中ですが、背景色が黒のままで、私はそれは色になりたい：私はbootstrap.cssのいくつかの部品を変更しましたカスタマイズされたブートストラップの一度それが崩壊したら、私が設定したbg色に行きます。

ここに私のhtmlコードは次のとおりです。

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class ="container"> 
    <div class="navbar-header"> 
     <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></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 class="active"><a href="(1)Home.html">Home</a></li> 
     <li><a href="(2)AboutMe.html">About Me</a></li> 
     <li class="dropdown"> 
      <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#"> Mother </a></li>  
      <li><a href="#"> Father </a></li>  
      <li><a href="#"> Younger Brother </a></li>  
      <li><a href="#"> Older Brother </a></li>  
      </ul> 
     </li> 
     <li><a href="(4)Contact.html">Contact Me</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

出典

2016-07-17 R Yor

私は私が問題を理解していません。あなたはそれをスクリーンショットで描くことができますか？私はあなたのために[bin]（http://output.jsbin.com/weguya）を作った。（質問を更新したら、[nutify]（http://meta.stackexchange.com/a/43020/303669）私は –

@MoshFeu navbar-rightの部分が3つの水平な棒を持つアイコンになるまでブラウザを小さなサイズにしようとすると、そのアイコンをクリックするとリストのアクティブな部分はnavbar-inverseの黒い背景を持ちますそれは –

@MoshFeu [ここPICだ]（http://imgur.com/sxV8303） –

あなたは、ブートストラップがある場合と同様に同じセレクターを使用する必要があります。.navbar-inverse .navbar-nav>.active>aあなたのスタイルは、ブートストラップのスタイルを上書きする方法ですもの。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
     .navbar{ 
 
     background-color: #A9B7C0; 
 
     border-bottom-color: #EFD9C1; 
 
     } 
 

 
     .navbar-inverse { 
 
     background-color: #A9B7C0 !important; 
 
     } 
 

 
     .container .navHeaderCollapse .nav li a { 
 
     color: #EFD9C1; 
 
     } 
 

 
     .container .navHeaderCollapse .nav .dropdown .dropdown-menu li a { 
 
     color: black; 
 
     } 
 

 
     .navbar .navbar-brand{ 
 
     color: #EFD9C1; 
 
     } 
 
     .navbar .navbar-brand:hover{ 
 
     color: #EAC67A; 
 
     } 
 

 
     .collapse .nav .active a{ 
 
     color: #A9B7C0 !important; 
 
     background-color:#EFD9C1; 
 
     } 
 

 
     .collapse .nav .active a:hover{ 
 
     background-color:#EFD9C1; 
 
     color: #A9B7C0; 
 
     } 
 

 
     body { 
 
     background-color: #CCCBC6; 
 
     color:white; 
 
     } 
 

 
     .navbar-inverse .navbar-nav>.active>a { 
 
     background:#EFD9C1; 
 
     color: #A9B7C0 !important; 
 
     } 
 

 
     @media screen and (max-width: 375px) { 
 
     .fullName{ 
 
      display:none; 
 
     } 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="navbar navbar-inverse navbar-static-top"> 
 
     <div class ="container"> 
 
     <div class="navbar-header"> 
 
      <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></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 class="active"><a href="(1)Home.html">Home</a></li> 
 
      <li><a href="(2)AboutMe.html">About Me</a></li> 
 
      <li class="dropdown"> 
 
       <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#"> Mother </a></li>  
 
       <li><a href="#"> Father </a></li>  
 
       <li><a href="#"> Younger Brother </a></li>  
 
       <li><a href="#"> Older Brother </a></li>  
 
       </ul> 
 
      </li> 
 
      <li><a href="(4)Contact.html">Contact Me</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

http://jsbin.com/weguya/edit?html,css,output

出典

2016-07-17 14:20:50

ブートストラップを学び始めた！ –

私の喜び:)幸運を... –

navbarが崩壊すると背景色を変更する方法

答えて

関連する問題