CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nethken
nethken

Reputation: 1092

Customizing Navbar collapse button when hover

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.

enter image description here

Here is my html code

          <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>

Here is my css code.

        #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;

    }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000;

   }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #a92419; 
  } 
 }

Upvotes: 2

Views: 2233

Answers (3)

AndrewL64
AndrewL64

Reputation: 16311

You need to specify the background-color for both hover as well as focus. You can do that by adding this to your CSS:

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background: none;
}

Here's a jsFiddle with the above code: https://jsfiddle.net/AndrewL32/mowb6gcb/

Upvotes: 2

NachoDawg
NachoDawg

Reputation: 1544

This is the normal, straight forward way, using the psuedo class :hover to add a css style to items upon hovering the mouse over them

button.navbar-toggle {
    background: #ccc; //a gray background as default
}


button.navbar-toggle:hover {
    background: none; //no background when you hover over the button
}

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

use this css which works on hover

button.navbar-toggle:hover{
  background:none;
  /* other css as you requirment*/
}

Upvotes: 0

Related Questions