모바일에있을 때 투명도에서 투명도로 부트 스트랩 3을 변경하십시오.

Question

부트 스트랩 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> 

Answer 1

모바일 기기

이 같은 자신의 미디어 쿼리를 추가

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

데모는 here

입니다