BootStrap Small Devices, Toggle Menu Background Colors

Question

Image tells more than 100 words.

So I'm trying to get background to that navbar dropdown for small devices (Please see image bellow). Also I'm not using Bootstrap default theme css file. Please note, this is only used, when device is too small to see full navigation bar for the website.

Please note, I'm using FontAwesome to provide icons!

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

You should set navbar-default class to your navbar , or you can just set background-color yourself with this css:

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

Answer 2

There Are different ways to do, if you want to do it on specific width, use: media query .

Use Following code:

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