更改導航欄顏色的一部分

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 。