Change bootstrap navbar background color and font color [closed]

Question

I want to change the background and text color in a bootstrap navbar but it's not changing as expected... Here is my custom CSS:

.navbar-default .navbar-fnt {
    color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
    color: #CC3333;
}

And the relevant HTML:

<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
    <div class="navbar-header">
        <div class="collapse navbar-collapse">
              ul and li
        </div>
    </div>
</div>

I can't figure out why this won't change the background and text-color - can anyone help?

Answer 1

I have successfully styled my Bootstrap navbar using the following CSS. Also you didn't define any font in your CSS so that's why the font isn't changing. The site for which this CSS is used can be found here.

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {     color: #000; /*Sets the text hover color on navbar*/ }  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >         a:hover, .navbar-default .navbar-nav > .active > a:focus {     color: white; /*BACKGROUND color for active*/     background-color: #030033; }  .navbar-default {     background-color: #0f006f;     border-color: #030033; }  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {     color: #262626;     text-decoration: none;     background-color: #66CCFF; /*change color of links in drop down here*/ }  .nav > li > a:hover, .nav > li > a:focus {     text-decoration: none;     background-color: silver; /*Change rollover cell color here*/ }  .navbar-default .navbar-nav > li > a {     color: white; /*Change active text color here*/ } 

Answer 2

No need for the specificity .navbar-default in your CSS. Background color requires background-color:#cc333333 (or just background:#cc3333). Finally, probably best to consolidate all your customizations into a single class, as below:

.navbar-custom {     color: #FFFFFF;     background-color: #CC3333; } 

..

<div id="menu" class="navbar navbar-default navbar-custom"> 

Example: http://www.bootply.com/OusJAAvFqR#

Answer 3

Most likely these classes are already defined by Bootstrap, make sure that your CSS file that you want to override the classes with is called AFTER the Bootstrap CSS.

<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->

Otherwise, you can put !important at the end of your CSS like this: color:#ffffff!important; but I would advise against using !important at all costs.