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

How to set the collapse background-color of the NavBar. Currently it looks like this.

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

If I add:

如果我添加:

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

it looks like this. Because I have a transparent background-color. I don't know how to fix it. I want to have the same color in both ways.

它看起来像这样。因为我有透明的背景色。我不知道如何解决它。我希望两种方式都有相同的颜色。

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

1 个解决方案

#1

I'm sure there will be a better way to structure you html, but here is the solution for your case:

我相信会有更好的方法来构建你的html,但这里是你的案例的解决方案:

Simply add this media queries to the bottom of your css file, and make sure it's rewriting the boostrap one you are using.

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

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

And here is the working demo

这是工作演示

#1