更改导航栏颜色的一部分

Question

我有一个在Bootstrap 4设计的navbar ，我试图更改导航栏的汉堡包background-color ，并将导航栏的其余部分更改为其他颜色。

这是当前输出的草图以及我要执行的操作：

我尝试使用z-index属性，但似乎没有任何效果。 你能给我任何想法吗？

 .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

如果要更改汉堡包的background-color尝试在.navbar-toggler或.navbar-toggler-left类而不是 .navbar

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

更新：

按钮的左侧仍然是灰色-与background-color无关。 Bootstrap默认在.navbar-toggler-left上具有以下样式

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

覆盖left: 1rem; 您自己的值为0

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

如果需要，可以相应地调整切换器的width和height 。