Navbar折りたたみをカスタマイズするボタン

Question

折り畳みボタンの色を変更するにはどうすればよいですか？白い線は仕切りのようなものです。ここに画像があります。誰か助けてくれますか？私は新しいCSSを、ブートストラップとHTMLので私を助けてください。または私にいくつかのアイデアを与えてください。ここで

私のコードです。

<nav class ="navbar navbar-default" role= "navigation"> 
    <div class = "container"> 
     <div class ="navbar-header"> 
      <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
       <span class="icon-bar" ></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="nav-collapse"> 

      <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Students</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">Faculty</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">About us</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">Contact us</a></li> 
       <li class="nav-divider"></li> 

      </ul> 

     </div> 
    </div> 
    </nav> 

ここは私のCSSです。

 #fot{ position:fixed; 
     bottom:0; 

     } 
     .navbar-default{ 
     background-color:rgb(193,57,45); 

     } 
     .navbar .nav > li > a{ 
     color:#ffe6e6; 
     } 
     .navbar .nav > li > a:hover{ 
     color:#000000; 
     } 
    .navbar .nav .active > a{ 
     background-color:rgb(193,57,45); 
    color:#000000; 
     } 
    .navbar .nav .active > a:hover{ 
    background:none; 
    color:#fff; 
    } 
    .nav .nav-divider{ 
    height: 50px; 
    margin: 0 10px; 
    border-right: 1px solid #a92419; 
    border-left: 1px solid #c1392d; 
    } 
    @media(max-width: 768px) 
{.nav .nav-divider{ 
    height: 1px; 
margin: 0 10px; 
background-color:#a92419; 

    } 
.navbar-default .navbar-toggle .icon-bar { 
background-color: #fff; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 

} 

Answer 1

のようなボタンクラスにいくつかのCSSを定義します。

.icon-bar 
{ 
    background:green !important; /*Whatever colour you want for icon lines*/ 
} 
.navbar-toggle 
{ 
    background:yellow !important; /*Whatever colour you want for background */ 
} 

CSS !importantは、ブートストラップCSSの実際のプロパティよりもプロパティを強制的に適用します。

更新：コード後、あなたのCSS ADDで：

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
    border-color: darkblue; /* Whatever Colour you want */ 
} 

Answer 2

はいofcourseの...ちょうど私は、これはあなたが探しているものだと思い、この

CSS

button.navbar-toggle{ 
    background:none; 
    border:none; 
    color:#000; 
    // and so on according to what style u want... 
} 

button.navbar-toggle span{ 
    background:#000;/*change accordingly*/ 
    // these span are for white line you can edit the lines in this css 
}