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

我假设您在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.
    }
}

这里有输出：
'image'

Answer 2

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

public specificguy(string name) : base(name)

background-color：rgba（222,222,222,0.84）; }

崩溃时发出样式引导导航栏

2 个答案: