Modifying Twitter Bootstrap‘s navbar can be annoying when you’re new to the framework.  At DigiMix we’ve used it for many projects since it arrived on the scene.  And we aren’t the only ones. Sites across the web have picked it up as a great tool to get functional, good looking designs up quickly.

Tb0But there’s one downside to the popularity of Bootstrap, it is all too easy to have your site look like every other Bootstrap site.  To my eyes, the biggest giveaway that someone is using Bootstrap is the black nav bar.  It seems like the majority of sites use the default black nav bar, and that screams lazy.

We almost always customize the top bar color for our sites, and though they are still obviously Bootstrap to a trained eye, they add a bit of personality.  Whether it’s a little green or showing off our company colors, a little goes a long way.

The black navbar is left untouched because of course, black can be visually appealing…. but the color attribute is also not very easy to change. It can be annoying using menus, having to track down all the variables needed in that fancy CSS takes some patience.

Bootstrap is built using LESS, so the first step is to get set up with that environment, Twitter gives some nice tips on getting that up and running on different platforms in their documentation.

Twitter has defined two variables in the patterns.css file, @navBarBgStart and @navBarBgEnd.  These, quite naturally, define what the top and bottom colors are for the nav bar gradient.  Though you can set these to whatever you’d like, if you want to keep things simple I recommend using dark colors, so that the default light text colors work without modifications.

Ok, so let’s try this out with a nice royal purple:


@navBarBgStart: #3D368B;
@navBarBgEnd: #232051;

Once we recompile the CSS file using Less, we get something majestic indeed.



Well that was easy right?  Not so fast, it turns out if we want to have drop-down menus, there’s more to it.  Let’s check out what that drop down looks like:




Shoot, well that isn’t right.  It turns out Bootstrap 2.0 doesn’t make changing those colors any easier, so that’s something we have to dig a bit deeper to change.

We’ll need to change both the background color for the dropdown, and the gradient used to draw the selection highlight.

The first can be set by changing the background-color in the .dropdown-menu style, somewhere abouts line 180 in patterns.css.  By default this is set to #333.  I recommend setting this to a value somewhere between the two gradient values you set for your top bar:

.dropdown-menu {
     background-color: #2F2A6C; // defaults to #333

The second change we have to make is how the active item is highlighted.  This is another gradient, and is under the styling for li a, somewhere around line 192 in patterns.css:

li a {
      color: #999;
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
      &:hover {
        #gradient > .vertical(@navBarBgEnd, #1B183E);
        color: @white;
Once we recompile our CSS file, we get something that looks pretty decent:




There, now we have a good looking nav bar that doesn’t scream Twitter Bootstrap, all with just a few lines of code.