折叠时发出样式引导导航栏

Question

我在我的代码中使用下面的 css 来实现透明的白色导航栏，但是在移动版背景样式中折叠菜单后不起作用。请帮助我克服这个问题。我尝试了其他问题中的大部分解决方案

#header_wrapper {
    background: rgba(255, 255, 255, 0.82);
}

.header_box {
    position: relative;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0px 10px 0px;
    z-index: 10000;
    transition: all 0.2s ease-in;
    height: 100px;
    background-color:transparent;  
    text-align: center;
    line-height: 40px;
    }
.header.active {
    background: rgba(255, 255, 255, 0.82);
}
.logo {
    float: left;
    position: relative;
    z-index: 2;
}

.res-nav_click {
    display: none;
}

/* 导航样式 ---------------------------------*/

.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}

.navbar {
    border: 0px solid #fff;
    min-height: 40px;
    margin-bottom: 0px;
}

.navbar-inverse .navbar-nav > li > a {
    color: #000;
}

.navStyle {
    float: right;
}

.navStyle ul {
    list-style: none;
    padding: 0px;
    margin-top:25px;
}

.navStyle ul li {
    display: inline-block;
    margin: 0 5px;
}

.navStyle ul li:first-child {
    /*margin:0px;*/;
}

.navStyle ul li:last-child {
    margin: 0 0 0 23px;
}

.navStyle ul li a {
    display: block;
    font-size: 15px;
    color: #222222;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 300;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.navStyle ul li a:hover {
    color: #ffc000;
    border: 0px solid #fff;
}

.navStyle > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #ffc000;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffc000;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffc000;
    background-color: transparent;
}

.navStyle > li.active > a,
.navStyle > li.active > a:hover {
    text-decoration: none;
    color: #ED5441;
    background-color: transparent;
}

HTML：

<header id="header_wrapper" class="header active border">
  <div class="container">
    <div class="header_box">
      <div class="logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></div>
      <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div id="main-nav" class="collapse navbar-collapse navStyle">
            <ul class="nav navbar-nav" id="mainNav">
              <li class="active"><a href="#" class="scroll-link hidden-xs">Home</a>
              <a href="#" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
              </li>
              <li><a href="#about" class="scroll-link hidden-xs">About Us</a>
              <a href="#about" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">About Us</a>
              </li>
              <li><a href="#products" class="scroll-link hidden-xs">Products</a>
              <a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
              </li>
                <li><a href="#services" class="scroll-link hidden-xs">Services</a>
                <a href="#services" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Services</a>
                </li>
              <li><a href="#group" class="scroll-link hidden-xs">Group</a>
              <a href="#group" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Group</a>
              </li>
              <li><a href="#careers" class="scroll-link hidden-xs">Careers</a>
              <a href="#careers" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Career</a>
              </li>
              <li><a href="#contact" class="scroll-link hidden-xs">Contact Us</a>
              <a href="#contact" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Contact Us</a>
              </li>
            </ul>
      </div>
     </nav>
    </div>
  </div>
</header>

http://globaltrendz.com/blackandgreen/ 请通过更改 header-wrapper bgcolor opactiy 来参考这个。喜欢这个是我需要的

Answer 1

我假设您希望移动导航栏位于 765 像素之后，因此您需要对其使用媒体查询。

在你的css文件末尾添加：

@media screen and (max-width: 765px){
    .navStyle ul{
            position: fixed;
            left: 0;
            background: rgba(255, 255, 255, 0.82) !important; //important //because you have inline styles.
    }
}

这是输出：

Answer 2

通过应用以下样式得到解决方案

   .navbar-inverse {
    background-color: rgba(222,222,222,0.84);
    border-color: transparent;
    width:100%;
    position:fixed;
    left:0;
}

.navStyle ul {

背景颜色：rgba(222,222,222,0.84); }