Bootstrap 3 navbar and collapse menu different background colors?

Question

I would like to have the Navbar background be a different color than the background of the collapsed menu.

Answer 1

I believe I found an answer to this, but would appreciate any further comments or alternate solutions, as this seems to be a bit hacky...

.navbar {background-color: #8e181b;}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand {color: #f1f1f1;}
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {color: #f1f1f1; background-color: #b27677;}

@media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}

Here is the jsfiddle: http://jsfiddle.net/vp7XS/

Answer 2

You can do it like this

.navbar-default {
    border-color: white;
    background-color: #FF2032;
 }

 @media only screen and (max-width: 768px) {
    .navbar-default .navbar-collapse {
        border-color: white;
        background-color: #e87373;
     } 
 }

check this fiddle , i hope it answers your question