更改摺疊的導航欄顏色

Question

我想知道必須編輯哪些CSS元素才能調整引導程序的摺疊導航欄。以下是我認爲的CSS代碼：

.navbar-default { 
    background-color: #ffffff; 
    border-color: #0f4c92; 
} 
.navbar-default .navbar-brand { 
    color: #0f4c92; 
} 
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #ffffff; 
} 
.navbar-default .navbar-text { 
    color: #0f4c92; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #0f4c92; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    color: #ffffff; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color: #0f4c92; 
} 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
    color: #ffffff; 
    background-color: #0f4c92; 
} 
.navbar-default .navbar-toggle { 
    border-color: #0f4c92; 
} 
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #0f4c92; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #0f4c92; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #0f4c92; 
} 
.navbar-default .navbar-link { 
    color: #0f4c92; 
} 
.navbar-default .navbar-link:hover { 
    color: #ffffff; 
} 

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #0f4c92; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffffff; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    background-color: #0f4c92; 
    } 
} 

希望我已經捕獲了正確的選擇器。下面是屏幕截圖，顯示未選擇的摺疊導航（您可以看到是我希望編輯的內容），然後是選定的摺疊導航。理想情況下，我想讓未選中的摺疊導航欄呈現藍色，並帶有3個白色條紋;我不在乎在激活/選中時是否使用相同的配色方案。

編輯 - 添加HTML

<nav class="navbar navbar-inverse" role="banner"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html"><img src="images/bestgatelogo1.png" alt="logo"></a> 
       </div> 

       <div class="collapse navbar-collapse navbar-right"> 
        <ul class="nav navbar-nav"> 
         <li><a href="index.html">Home</a></li> 
         <li class="active"><a href="about-us.html">About Us</a></li> 
         <li><a href="services.html">Services</a></li> 
         <li><a href="careers.html">Careers</a></li> 
         <li><a href="contact-us.html">Contact</a></li>       
        </ul> 
       </div> 
      </div><!--/.container--> 
     </nav><!--/nav--> 

Answer 1

• 如果你想改變右圖像的background-color，你需要編輯類 - .navbar-toggle

• 對於border-color，編輯類 - .navbar-inverse .navbar-toggle

• 對於3個橫條紋，編輯類 - .navbar-inverse .navbar-toggle .icon-bar

注 -您可能需要更多的重量添加到您的選擇或添加!important每CSS屬性。例如 - background-color: red !important