How to Customise Your Thesis Navigation Bar

Back in this post I referred to people saying that Thesis sites are too easily recognizable – and the fact is, in many cases it’s true. But it doesn’t need to be.

One of Thesis’ more easily recognizable features is its navigation menu, or navigation bar, so today I’ll cover some simple ways to change the way it looks.

Way back in version 1.6 a lot of design features were released, which enabled you to choose and change the colours of your navigation bar and menu tabs simply and quickly.

You can do all this through the ‘Fonts, Colours and More!’ section of the Design Options page. Just click on the Nav Menu item and experiment to your heart’s content. More details here.

But, in addition to the colours, there are two other things you can change that will make a difference: the font in your Nav Menu and the use of a background image.

Navigation Menu Font

Doesn’t sound like much, I know, but one of the first things I recognize about a Thesis site is the Nav Menu font. It’s quite distinctive, and many people never bother to change it.

So here’s how to do that.

Go to your Thesis Custom File Editor and add this code to your custom.css file:

.custom .menu a { font-family: arial; font-weight: bold; letter-spacing: 1px; text-transform: none; }

.custom .menu a:hover { font-family: arial; font-weight: bold; letter-spacing: 1px; text-transform: none; }

That will result in the font on your navigation bar being changed to arial bold, with the letter spacing being reduced to 1px and the text being displaid in the same way you write it.

Of course, you can use whatever font or spacing you like!

So once you’ve added that code and seen the difference, start to experiment with different fonts and spacing until you find settings that you like.

And if you need to change the colour of the font on hover, simply add color: #hexcode; inside the squiggly brackets that follow the .custom .menu a:hover selector. You’ll need to replace ‘hexcode’ with the 6 digit code for the colour you want.

Navigation Menu Background Image

Another simple way to change the appearance of your Navigation Menu is to give it a rounded look by adding a background image – which is what I’ve done to the Navigation Menu on this site.

So here’s how to do that…

Create a small gradient image. It needs to be as small as possible but, usually, it needs to be the same height as your navigation menu bar.

The size of the background image I’ve used on that site is 15px X 28px (the height of the navigation bar).

To create a rounded look you need to make your colour gradient go from light (top) to dark (bottom).

This first image will be used as the background for the entire navigation bar and the individual tabs.

Next we need to create a background image for when you hover over a menu item.

I find the easiest way to do this is to simply reverse the colours I used in creating the first image.

So instead of your gradient going from light to dark, make it go from dark to light, which will give it a concave look.

Once you’ve created your two images upload them to your server and make a note of their URLs.

Next you need to add this code to your custom.css file:

.custom .menu { background-image: url(http://www.yoursite.com/your-images/small-image1.jpg); background-repeat: repeat-x; }

.custom .menu a { background-image: url(http:// www.yoursite.com/your-images/small-image1.jpg); background-repeat: repeat-x; }

.custom .menu a:hover { background-image: url(http:// www.yoursite.com/your-images/small-image2.jpg); background-repeat: repeat-x; }

(Remember to use the URLs of your images, and note that the code for .menu and .menu a is the same, and that the a:hover image has a different filename!)

Because you’re making small images they’ll load quickly, without compromising page load time.

The background-repeat: repeat-x; command tells the browser to repeat the image for the full width of the div that it’s in.

And if you want to customize both the font and the background image all you need to do is combine those two snippets of code: copy the code from inside the squiggly brackets in the first .custom .menu a section and paste it into the squiggly brackets in the second .custom .menu a section, immediately following the repeat-x; statement.

And do the same for the .custom .menu a:hover sections.

That’s it – two easy ways to make your navigation menus look less like Thesis.

Once you’re comfortable with making those changes start experimenting until you get the look you want.

Cheers,

Filed in: Thesis Theme

Was this article useful? Please share it: