Changing navbar color in Twitter's Bootstrap 2.3.2

Question

I've looked at other posts addressing this question, but I still can't seem to able to change the background color the navbar in Twitter Bootstrap. I'm using version 2.3.2. I did everything described by baptme in this post Change navbar color in twitter bootstrap 2.0.4 . Here's the CSS I'm using to override the original bootstrap.css file.

.navbar-inner {
  background: #eab92d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
  }

    .navbar-inner, .navbar .btn-navbar {
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
    }

  .navbar .divider-vertical {
    background-color: #c79810;
    border-right: 1px solid #eab92d;
    }

  .navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #c79810;
    }

  .navbar .nav > li > a {
    color: #f9ed9d;
    }

.navbar-fixed-top .brand {
  color: #634c08;color: #f4dc87;
  }

  .navbar .nav > li > a:hover {color:white;}

  .navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

The only thing that changes when I run this is that the active "home" link has the #c79810 background color. Everything else still has the default black background color.

Also, I really don't care about having a gradient unless it's required. Just a solid background color is fine.

Any ideas as to what I'm doing wrong? Thanks!

score 11 · Answer 1 · edited May 23 '17 at 12:14

(for Twitter's Bootstrap 3, see: Change navbar color in Twitter Bootstrap 3)

Don't forget the remove the gradient by setting background-image: none;

Example CSS code: (see: http://bootply.com/66394)

/* set the background-color to red */
.navbar-inner {
  background-color: red;
  /* remove the gradient */
  background-image: none;
  /* set font color to white */
  color: white;
}   

/* menu items */

/* set the background of the menu items to pink and default color to white */
.navbar .nav > li > a {
  background-color: pink;
  color: white;
}

/* set hover and focus to lightblue */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: lightblue;
  color: white;
}

/* set active item to darkgreen */
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  background-color: darkgreen;
  color: white;
}

/* set font color and background of the project name (brand) */
.navbar .brand {
  background-color: orange;
  color: navy;
}

Add this code after bootstrap's CSS

Using Less

You could also consider to compile you own version. Try http://twitter.github.io/bootstrap/customize.html (which has a apart section for the navbar setting) or download your own copy from: https://github.com/twitter/bootstrap. You will find the navbar setting in variables.less. navbar.less is used to compile the navbar (depends on variables.less and mixins.less).

Using the setting shown below will give you the same color changes as before but more stable and with gradients:

// Navbar
// -------------------------
@navbarCollapseWidth:             979px;
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #FF0000; // red
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #fff; //white
@navbarLinkColor:                 #fff;
@navbarLinkColorHover:            #fff; 
@navbarLinkColorActive:           #fff;
@navbarLinkBackgroundHover:       #ADD8E6; //lightblue
@navbarLinkBackgroundActive:      #006400; //darkgreen

@navbarBrandColor:                #000080; // navy

NOTE there is no variable to set the background color of the brand. To change this background color you will have to add something like:

.navbar .brand {
  background-color: #FFA500; // orange
}

See: http://bootply.com/66399

score 0 · Answer 2 · answered Oct 09 '14 at 08:00

You will need to overwrite it with some CSS. Make sure this loads below bootstrap css This will make the navbar brown

.navbar {
    background-color: #442a13; 
}

/* set the background-color to red */
.navbar-inner {
  background-color: #442a13 !important;
  background-image: -webkit-linear-gradient(top, #442a13 0%, #291306 100%)!important;
  background-image:         linear-gradient(to bottom, #442a13 0%, #291306 100%)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#442a13', endColorstr='#291306', GradientType=0)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  color:#fff; 
  border: none;

}

.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus{
    background-color: #291306;
    color:#fff;
}

.dropdown-menu{
    background-color: #371c09;
    padding-left: 5px;
}

.navbar-inverse .brand, .navbar-inverse .nav>li>a{
    color: #fff;
}

.navbar-inverse .nav .dropdown-header{
    color:#ccc;
}

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{
    background-color: #291306;
}

.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{
    color:#fff;
}

.nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover{
    background-color: #371c09 !important;

  background-image: -webkit-linear-gradient(top, #371c09 0%, #291306 100%)!important;
  background-image:         linear-gradient(to bottom, #371c09 0%, #291306 100%)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#371c09', endColorstr='#291306', GradientType=0)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  color:#fff; 
}

.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}

.navbar .nav li.dropdown>.dropdown-toggle .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}

.navbar-inverse .divider-vertical {
border-right-color: #371c09;
border-left-color: #291306;
}

Changing navbar color in Twitter's Bootstrap 2.3.2

2 Answers2

Using Less