将Bootstrap 3 Navbar从透明变为透明时不透明

我在Bootstrap 3中有一个透明的Navbar，并且正试图让导航栏在移动设备上不再透明。换句话说，如果您在移动设备上展开菜单，我希望菜单项具有不透明的彩色背景。将Bootstrap 3 Navbar从透明变为透明时不透明

还没有能够弄清楚如何做到这一点 - 任何想法？

我的HTML代码如下：

<!-- Navigation --> 
     <nav class="navbar navbar-default navbar-fixed-top navbar-absolute navbar-transparent big" role="navigation" id="navigation"> 
      <div class="container"> 
       <!-- Head --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#"> 
         <img src="assets/images/logo_big.png" class="img-responsive"> 
        </a> 
       </div> 
       <!-- Items --> 
       <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
        <!-- Left --> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="">HOME</a></li> 
         <li><a href="blog/">BLOG</a></li> 
         <li><a href="price/">PRICING</a></li> 
        </ul> 

       </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav>

来源

2014-07-12 Adam

添加您自己的媒体查询这样的移动设备

@media (max-width: 767px) { 
    .navbar-transparent { 
     background: #000 !important; /*Add your own background*/ 
    } 
}

演示为here

来源

2014-07-12 16:40:20

将Bootstrap 3 Navbar从透明变为透明时不透明

回答

相关问题