Ändern Teil der Navbar Farbe

Question

Ich habe eine navbar, die in Bootstrap 4 entworfen ist, versuche ich den Hamburger background-color der Navbar, und den Rest der Navbar in einer anderen Farbe zu ändern. Hier

ist die Skizze meiner aktuellen Ausgabe und was ich zu tun versucht:

Ich habe versucht, z-index-Eigenschaft verwenden, aber nichts scheint zu funktionieren. Kannst du mir irgendwelche Ideen geben?

.navbar { 
 
    padding-left: 80px; 
 
    height: 54px; 
 
    top: 40px; 
 
    flex-flow: row nowrap; 
 
    display: inline-flex; 
 
    border-bottom-right-radius: 200px; 
 
    border-top-right-radius: 200px; 
 
    background-color: #A6ACAF !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;"> 
 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="lines"></span> 
 
    <span class="lines"></span> 
 
    <span class="lines"></span> 
 
    </button> 
 
<h1 class="navbar-brand mb-0 move-header">NavBrand</h1> 
 
    <div class="collapse animated fadeInLeft" id="navbarNav"> 
 
    <ul class="navbar-nav">@yield('setActive') </ul> 
 
    </div> 
 
</nav>

Answer 1

Wenn Sie den Hamburger background-color versuchen zu ändern, um den Stil auf .navbar-toggler oder .navbar-toggler-left Klasse Anwendung und nicht.navbar

.navbar-toggler { 
    background-color: red; 
} 

Aktualisiert:

Links von der Taste ist immer noch grau - hat nichts mit der background-color zu tun. Bootstrap standardmäßig die folgenden Stile auf .navbar-toggler-left

.navbar-toggler-left { 
    position: absolute; 
    left: 1rem; //this is getting that left gap 
} 

außer Kraft setzen, die oben left: 1rem; Ihren eigenen Wert hat, ist 0

.navbar-toggler { 
    background-color: red; 
    left: 0; //fix 
} 

einstellen width & height des toggler entsprechend, wenn Sie wollen.