Change bootstrap navbar background color and font color

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?

Have you tried to use Web Developer tools to inspect the target element? What applied CSS styles it shows? — Mikko Ohtamaa, Jun 09 '14 at 19:32
Make sure that your custom stylesheets are correctly linked. Example: — live-love, Oct 08 '14 at 18:38
duplicate of http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 — Mahmood Dehghan, Jun 18 '15 at 21:17

score 47 · Accepted Answer · edited Apr 11 '18 at 08:44

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*/
}

This is a really bad way to go. You're going to be in CSS hell with a mess of styles. Change the variables before you download bootstrap if you are in raw CSS. If you are using LESS or SCSS, just change the one variable for `$navbar-default-bg: red;` — Don P, Mar 03 '15 at 22:33
This was driving me insane for a long time, and I realized somewhere there was a theme.less ( that had a ```background-image``` set to a linear gradient that was taking precedence over ```background-color``` — Literate Corvette, Nov 25 '20 at 20:49

score 44 · Answer 2 · answered Jun 09 '14 at 19:42

44

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#

answered Jun 09 '14 at 19:42

Shawn Taylor

15,590
4
32
39

1

how to use it in div thereafter? – user2281858 Jun 09 '14 at 19:44
1

I updated my answer to show top-level html – Shawn Taylor Jun 09 '14 at 19:45
2

for some reason its only updating the background color to red. not setting the font to white. – user2281858 Jun 09 '14 at 19:49
Do you have ul or li styling further down the line? Can you recreate the issue in bootply or jsfiddle? – Shawn Taylor Jun 09 '14 at 22:24
let me rephrase.. you must have some more styling downline, or some stronger specificity somewhere (in which case you made need your specificity back, that I removed in my answer) – Shawn Taylor Jun 11 '14 at 03:57

score 6 · Answer 3 · answered Jun 09 '14 at 19:37

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.

Change bootstrap navbar background color and font color

3 Answers3