设置背景颜色与不透明的崩溃导航栏

如何设置导航栏的折叠背景颜色。目前看起来像this。设置背景颜色与不透明的崩溃导航栏

如果我添加：

.collapse { 
background: rgba(70,130,180 ,0.4);}

它看起来像this。因为我有一个透明的背景色。我不知道如何解决它。我想在两种方式中使用相同的颜色。

.navbar-nav > li > a { 
    height: 30px; 
    padding-top:8px !important; 
} 

li a { 
    margin-right: 15px; 
    color: gray; 
    text-transform: uppercase; 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 16px; 
} 

.navbar-toggle { 
    margin-top: 3px; 
    background-color: #5F9EA0; 
    height: 28px; 
} 

.icon-bar { 
    margin-top: -2px; 
    background-color: white; 
} 

ul.nav a:hover { 
    color: #5F9EA0; 
    background-color: transparent; 
} 

.navbar { 
    background: rgba(70,130,180 ,0.4); 
    height: 35px; 
    min-height: 35px; 
    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 

.navbar-header img { 
    height: 32px; 
    padding-top: 3px; 
    padding-left: 20px; 
} 


<body> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <nav role="navigation" class="navbar navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="pull-left" href="#"> 
      <img src="imgs/Logo.png"/> 
     </a> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</body>

来源

2015-05-04 user3792694

我相信会有一个更好的方式来构建你的html，但这里是你的情况的解决方案：

只需将此媒体查询添加到您的CSS文件的底部，并确保它正在重写您正在使用的boostrap。

@media (max-width:768px) { 
    .collapse { 
     margin-top:6px; 
     background: rgba(70, 130, 180, 0.4); 
    } 
}

这里是工作demo

来源

2015-05-04 23:51:53

设置背景颜色与不透明的崩溃导航栏

回答

相关问题