Thesis Tutorial: Color Navigation Bar

In this thesis tutorial I will show you how to color your navigation bar. Everything shows up fine in Firefox and Opera, but doesn’t show up fine in Internet Explorer. You can see the images below of the before and after of this tutorial. If you have any problems with this tutorial, then let me know when I will help you with your navigation bar.

Create an image that is the width of your page. The width of my page happens to be 974 pixels so that’s how wide I create the image. The height of my navigation bar was already at 32 pixels so I decided to create my navigation bar a little taller. It will not show up on your blog being taller as long as you send your height correctly. I set mine at 32 pixels but make sure you set the height in the code below to however tall your navigation bar is.

My Navigation Bar Background

The code below has to be used with the custom functions code no matter what. It will not work without it. Make sure you change my URL to your own images URL. Then changed the height and width to whatever you use for your navigation bar image.

Custom CSS

.custom #customnav { position: relative; height: 32px; width: 974px: padding: 0 1em; background: url('http://franklinbishop.net/wp-content/uploads/2009/06/nav-background.gif') 100% 100% no-repeat; border: none; }

OR

I recommend just using the code below because it is definitely the easiest way to go about having a colored navigation bar. You may also need to use the custom functions code to go along with it. Make sure you change the URL that I have going to my image to your own. Plus chang the height to whatever the height is of your navigation bar.

Custom CSS

.custom ul#tabs { width: auto; border: none; height: 32px; background: #7da46d url('http://franklinbishop.net/wp-content/uploads/2009/01/nav-bckg.gif') no-repeat; }

WITH

The custom functions code below will need to be added to your custom functions file. It is easiest if you use this code with both ways above. If you do not want your navigation bar before the header make sure to change it to after or wherever else you want the navigation bar.

Custom_functions

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
 
function custtomnav() { ?>
<div id="customnav">
<?php thesis_nav_menu(); ?>
</div>
<?php }
 
add_action('thesis_hook_before_header', 'custtomnav');

Unfinished Navigation Bar

Finished Navigation Bar

That’s basically all there is to it. Thesis is really easy to use once you get used to working with code. I know there are many people that did not know how to have a colored navigation bar in Internet Explorer, but this should work. If not let me know and I will try to help.