부트 스트랩 소형 장치, 토글 메뉴 배경색

Question

이미지는 100 단어 이상을 표시합니다.

작은 장치를위한 navbar 드롭 다운에 대한 배경 지식을 얻으려고합니다. (아래 이미지 참조) 또한 이 아니며 부트 스트랩 기본 테마 CSS 파일을 사용하는이 아닙니다. 기기가 너무 작아서 웹 사이트의 전체 탐색 바를 볼 수없는 경우에만 사용됩니다.

아이콘을 제공하기 위해 FontAwesome을 사용하고 있습니다.

HTML :

<div class="body-top-padding"> 
<nav class="navbar navbar-fixed-top container marginaali" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">(Valinnat)</span> 
       <i class="fa fa-bars valikko-icon-vari" aria-hidden="true" id="menuIconColor"></i> 
      </button> 
      <span class="logo"></span> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav pull-right menuValikkoYksi"> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
</div> 

CSS : 당신은 당신의 navbar에 navbar-default 클래스를 설정해야합니다, 아니면 그냥이 CSS로 자신을 배경 색 설정할 수 있습니다

@charset "UTF-8"; 
.menuValikkoYksi { 
    margin-right: 20%; 
} 
html, body { 
    height: 100%; 
} 
.navbar-toggle { 
    background-color: #00f; 
} 

.carousel-control.left, .carousel-control.right { 
    background-image: none; 
} 
.item, .active, .carousel-inner { 
    height: 100%; 
} 
.body-top-padding { 
    padding-top: 115px; 
} 
.marginaali { 
    margin-top: 25px; 
    -webkit-background-size: cover; 
    background-size: cover; 
} 
.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
.karuselli-ico { 
    color: #202020; 
} 
.logo { 
    margin-left: 45px; 
    background-image: url(/public/images/logo-min.gif); 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 90px; 
    height: 64px; 
} 
#menuIconColor { 
    color: #fff; 
} 

Answer 1

:

를

.navbar { 
    background-color: #f8f8f8; 
    border-color: #e7e7e7; 
} 

Answer 2

다양한 방법으로 할 수 있습니다. 특정 너비로 ​​수행하려면 미디어 쿼리을 사용하십시오. 코드에 따라

사용 : 좋은 찾고되지

@media(max-width:420px){ 
.nav{ 
background-color: #ccc; 
border-color: #000; 
} 
}