更改导航栏颜色的一部分

Question

我有navbar设计在Bootstrap 4，我正在尝试更改导航栏的汉堡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＆amp;如果你愿意的话，可以相应地height切换。