2017-08-17 65 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