title: Customizing Navbar collapse button when hover
body: <p>How to remove the background of the collapse button when the mouse hover to the button. here is the picture. I really want to remove that white background when mouse hover to that button please help me. Im new to html and css and also to bootstrap.</p>
  
  <p><a href="https://i.stack.imgur.com/kVd79.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kVd79.png" alt="enter image description here"></a></p>
  
  <p>Here is my html 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 code.</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;
  
      }
    button.navbar-toggle{
    background:none;
    border:none;
    color:#000;
  
     }
    .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #a92419; 
    } 
   }
  </code></pre>