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;
}
Source (Stackoverflow)