Unable to change color of icon-bar in bootstrap

Question

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;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

Unable to change color of icon-bar in bootstrap

Sign up