2017-08-17 67 views
1

我正在使用最新版本的引導程序創建網站,我有一個菜單,當在移動設備上查看時切換到切換菜單的3條小線條與漢堡相同菜單。我希望能夠改變線條的顏色,因爲我的標題是白色的,線條也是如此,並且它們不能被看到。我有谷歌這個,但沒有改變顏色的喜悅。使用引導程序更改切換菜單的顏色

代碼:

.navbar-header, #myNavbar, .container-fluid { 
 
    background: #fff; 
 
    
 
    } 
 

 
    .nav.navbar-nav li a{ 
 
    color: #66728d; 
 
    font-size: 18px; 
 
    background: transparent; 
 
} 
 

 
.navbar-brand img { 
 
    
 
    width:176px !important; 
 
    height:110px !important; 
 
    
 
} 
 
    
 
    
 
.nav.navbar-nav li a:hover { 
 
    background: #8d8166; 
 
} 
 

 
    .navbar-header, #myNavbar, .container-fluid img { 
 
    padding-top: 0; 
 
    padding-bottom:5px; 
 
     
 
    } 
 

 
    .nav.navbar-nav li a { 
 
    color: #66728d; 
 
    background: transparent; 
 
} 
 

 
.navbar-toggle { 
 
    color: green; 
 
}
<nav class="navbar navbar-inverse navbar-light bg-faded"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="#home"> 
 
     <img src="images/logo.JPG" alt="Los Angeles"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#home">Home</a></li> 
 
      <li><a href="#section2">About Us</a></li> 
 
      <li><a href="#section3">Specials</a></li> 
 
      <li><a href="#section3">Links</a></li> 
 
      <li><a href="#section3">Contact Us</a></li> 
 
      
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

回答

1

你可以使用這個CSS控制3條的顏色漢堡包切換按鈕:

.navbar .navbar-toggle .icon-bar { 
    background-color: #000; 
} 
+0

我已經厭倦了這一點,但它不起作用 – beckyboo

+0

當你添加這個CSS時它是在bootstrap.css文件之後? – jhawes

+0

是的,我把它鏈接到引導後的css – beckyboo