Satyadev Satyadev - 5 months ago 45
CSS Question

Unable to change color of icon-bar in bootstrap

When I unhover the icon-bar(which appears in mobile or when zoomed in) after clicking it, the color changes back to default. It is not supposed to change color after unhover/mouseout.

Here is the link to my site: https://bgrnature.herokuapp.com/

html:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>


I tried this but still didn't work:

.navbar-default .navbar-toggle{
background: #51a746;
color: #fff !important;
border-color: #51a746;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}

.navbar-default .navbar-toggle:hover{
background-color: #51a746;
}

Answer

The issue is not with the .navbar-toggle's :hover but with :focus. To fix the issue, change this in your css to fix the issue:

Replace this:

.navbar-default .navbar-toggle:hover{
    background-color: #51a746;
}

with this:

 .navbar-default .navbar-toggle:focus {
     background-color: #51a746;
 }