使用不透明的折叠导航栏设置背景色

Question

如何设置NavBar的折叠背景颜色。 目前看起来像这样。

如果我添加：

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

它看起来像这样。 因为我有透明的背景色。 我不知道该如何解决。 我想两种颜色都一样。

.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>

Answer 1

我敢肯定会有更好的方法来构造html，但这是您的解决方案：

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

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

这是工作演示

使用不透明的折叠导航栏设置背景色

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-04 23:51:53

使用不透明的折叠导航栏设置背景色

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-04 23:51:53

解决方案1
0 已采纳 2015-05-04 23:51:53