问题样式引导navbar当崩溃

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/请参考这一个改变头，包装的bgcolor opactiy。像这样一个我需要的

Answer 1

我假设你想要765px之后的移动导航栏，所以你需要使用媒体查询。

在你的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）; }