サイドバーが表示されているときに、ナビゲーションバーに背景色が2つあります

Question

navbarがbootstrap、サイドバーがJSBinの単純なページを作成しました。現在のところ、navbarの背景色はblackです。

は今、私は次の達成したい：

1）ページには、サイドバーを表示するのに十分な広されていない場合、私は、ナビゲーションバーの背景色が完全にblackになりたいです。

2））ページには、サイドバーを表示するのに十分な幅であるとき、私はサイドバー上記のナビゲーションバーの面積が異なる背景色（例えば、whiteを持ちたい、一方。次のスクリーンショットのように、サイドバーの上の領域はblueで、残りの部分はwhiteです。

<div class="col-sm-3 col-md-3">でnavbarに要素を追加しようとしましたが、機能しませんでした。これはcontainerまたはcontainer-fluidにしか含まれていないようです。

これを達成する方法を知っている人はいますか？回避策はありますか？

Answer 1

1）ページには、サイドバーを表示するのに十分な広されていない場合、私はnavbarの 背景色が完全に黒になりたいです。

あなたは、ページがサイドバーを表示するのに十分な幅であるとき、あなたのbodyタグだけで、一方CSS

@media (max-width: 768px) { 
    body { 
     background-color: #000; // black color for background 
    } 
    } 

2）で、本体の後にそれを含めへのメディアクエリを追加することができ、私はエリアが欲しいです別の背景色（たとえば、白）を持つように、サイドバーの上にあるナビゲーションバーのアイコンをクリックします。次のスクリーンショットのように、サイドバーの上にある領域は青色で、その他の部分は白です（navbar）。

ナビゲーションバーの外にプロジェクト名を移動し、幅と色を適用することができます。

残りの部分を作るために、メディアクエリを追加することを忘れないでくださいは、ナビゲーションバーの白のまま:)

@media (min-width: 768px) { 
    .sidebar { 
     position: fixed; 
     top: 51px; 
     bottom: 0; 
     left: 0; 
     z-index: 1000; 
     display: block; 
     padding: 20px; 
     overflow-x: hidden; 
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ 
     background-color: #f5f5f5; 
     border-right: 1px solid #eee; 
    } 
    .navbar-inverse { 
     background-color: #F8F8F8; // background color of navbar 
     border-color: #E7E7E7; // border color of navbar 
    } 
    } 

あなたは

<div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;"> 
    <a class="navbar-brand" href="#">Project name</a> 
</div> 

全ナビゲーションバー

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;"> 
    <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Dashboard</a></li> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Help</a></li> 
     </ul> 
     <form class="navbar-form navbar-right"> 
     <input type="text" class="form-control" placeholder="Search..."> 
     </form> 
    </div> 
    </div> 
</nav> 

を必要とパートここがJSBin