BootStrap Small Devices, Toggle Menü Hintergrundfarben

Question

Das Bild sagt mehr als 100 Wörter.

Also ich versuche, Hintergrund zu diesem Navbar Dropdown für kleine Geräte zu bekommen (siehe Bild unten). Auch ich bin nicht mit Bootstrap Standardthema CSS-Datei. Bitte beachten Sie, dass dies nur verwendet wird, wenn das Gerät zu klein ist, um die vollständige Navigationsleiste für die Website anzuzeigen.

Bitte beachten Sie, dass ich FontAwesome für die Bereitstellung von Symbolen verwende!

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:

@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

Sie navbar-default Klasse Ihren navbar setzen soll, oder Sie können einfach eingestellt Hintergrund-Farbe selbst mit diesem CSS:

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

Answer 2

Es gibt verschiedene Möglichkeiten zu tun, wenn Sie es auf bestimmte Breite tun möchten, verwenden Sie: Medienabfrage.

Verwenden folgenden Code:

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