navbar 색상의 일부 변경

Question

navbar은 Bootstrap 4으로 설계되었으므로 navbar의 햄버거 background-color과 나머지 navbar를 다른 색상으로 변경하려고합니다.

내가 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과 아무 관련이 없습니다. 기본적으로 자신의 값으로 .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 
} 

그에 따라 toggler의 width & height를 조정이다.