Changing part of navbar color - html

Question

I have a navbar which is designed in Bootstrap 4 , I am trying to change the hamburger background-color of the navbar, and the rest of the navbar in some other color.
Here is the sketch of my current output and what I am trying to do:
I tried using z-index property but nothing seems to work. Can you give me any ideas?
.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

If you want to change the hamburger background-color try applying the style on .navbar-toggler or .navbar-toggler-left class and not .navbar
.navbar-toggler {
background-color: red;
}
Updated:
Left of the button is still grey - has nothing to do with the background-color. Bootstrap by default has the following styles on .navbar-toggler-left
.navbar-toggler-left {
position: absolute;
left: 1rem; //this is getting that left gap
}
Override the above left: 1rem; to your own value which is 0
.navbar-toggler {
background-color: red;
left: 0; //fix
}
Adjust width & height of the toggler accordingly if you want.