Die Farbe der Symbolleiste im Bootstrap kann nicht geändert werden

Question

Wenn ich nach dem Klicken auf die Symbolleiste (die im Mobilgerät oder beim Vergrößern angezeigt wird) ausblendet, wird die Farbe auf den Standardwert zurückgesetzt. Es soll nicht die Farbe nach Unhover/Mouseout ändern. Hier

ist der Link zu meiner Seite: 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> 

Ich habe versucht, dies aber immer noch nicht funktioniert:

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

das Problem nicht mit dem ist. navbar-toggle's: hover aber mit: focus. Um das Problem zu beheben, ändern Sie dies in Ihrem CSS das Problem zu beheben:

Ersetzen Sie diese:

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

mit diesem:

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