How to change the menu colors?

You can change CSS classes or use tools like Lavish or TWBSColor .

And I found the following SOEn question which is very complete and didactic. I transcribe and translate the user response here zessx :

  

NavBars available

     

There are 2 types of navbar:

     

<!-- A clara -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A escura -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

     

Using the standard colors

     

These are the standard colors and what they are for:

     

• #F8F8F8 : navbar background
  
• #E7E7E7 : navbar border
  
• #777 : default color
  
• #333 : hover color ( #5E5E5E for .nav-brand )
  
• #555 : active color
  
• #D5D5D5 : active background
  

Standard Style

     

If you want to change something in style, this is the CSS you need to change:

     

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #CCC;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
      color: #777;
    }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

     

Navbar examples with custom colors

     

Here are 4 exams of navbars with different colors:
JSFiddle link

     

    

AndtheSCSScode:

    $bgDefault : #e74c3c; $bgHighlight : #c0392b; $colDefault : #ecf0f1; $colHover : #ffbbbc; .navbar-default { background-color: $bgDefault; border-color: $bgHighlight; .navbar-brand { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} .navbar-text { color: $colDefault; } .navbar-nav { > li { > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }}} > .active { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }} > .open { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }}} .navbar-toggle { border-color: $bgHighlight; &:hover, &:focus { background-color: $bgHighlight; } .icon-bar { background-color: $colDefault; }} .navbar-collapse, .navbar-form { border-color: $colDefault; } .navbar-link { color: $colDefault; &:hover { color: $colHighlight; }}} @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu { > li > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} > .active { > a, > a:hover, > a:focus, { color: $colHighlight; background-color: $bgHighlight; }}} }      

And finally, a small gift

     

I've created a little script that lets you generate your theme:
TWBSColor - Generate your own Bootstrap navbar

     

[Update]: TWBSColor now generates SCSS / SASS / LESS / CSS code.