title: Customize Navbar Collapse button
body: <p>How can i change the color of the collapse button there? and the white lines like the divider. here is the picture. Can someone help me? im new to css,bootstrap and html so please help me. or give me some ideas.</p>
  
  <p><a href="https://i.stack.imgur.com/IMLWY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IMLWY.png" alt="enter image description here"></a></p>
  
  <p>Here is my code.</p>
  
  <pre><code>&lt;nav class ="navbar navbar-default" role= "navigation"&gt;
      &lt;div class = "container"&gt;
          &lt;div class ="navbar-header"&gt;
              &lt;button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"&gt;
                  &lt;span class="icon-bar" &gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;  
              &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="nav-collapse"&gt;
  
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Students&lt;/a&gt;&lt;/li&gt;
                &lt;li class="nav-divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Faculty&lt;/a&gt;&lt;/li&gt;
                &lt;li class="nav-divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
                &lt;li class="nav-divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
                &lt;li class="nav-divider"&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
           &lt;/div&gt;
       &lt;/div&gt;
     &lt;/nav&gt;
  </code></pre>
  
  <p>Here is my css.</p>
  
  <pre><code>       #fot{ position:fixed;
         bottom:0;
  
         }
        .navbar-default{
          background-color:rgb(193,57,45);
  
         }
        .navbar .nav &gt; li &gt; a{
         color:#ffe6e6;
         }
        .navbar .nav &gt; li &gt; a:hover{
          color:#000000;
          }
       .navbar .nav .active &gt; a{
        background-color:rgb(193,57,45);
       color:#000000;
        }
      .navbar .nav .active &gt; 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;
  
   }
  </code></pre>