The Nyaruka Blog

Twitter Bootstrap is the bee's knees.  At Nyaruka we've used it for virtually every single project 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.

But 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 for our work with TechnoServe on their Coffee Transparency site, or showing off our company colors for our Ministry of Health feedback site, a little goes a long way.

Of course there's a reason not that many people change it.  That black nav bar isn't so bad looking, and Bootstrap doesn't make it particularly easy to change.  It can be especially annoying if you are using menus, having to track down all the variables needed in that fancy CSS takes some patience.

Thankfully, the upcoming 2.0 version (due out January 31st) introduces a couple variables to make things easier, though you'll still have to do a bit of hackery to deal with drop down menus.

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.

In 2.0, Twitter has defined two new 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;
      }
    }