How to Customize the Thesis Navigation Bar

As you can see, my navigation bar isn’t the original one. So, this post shows how to customize the navigation bar like I did. This is valid CSS, but with 2 warnings. This is based on the kristarella.com code, but works better.

All you have to do is insert this in the custom.css file. This file is located under wp-content/themes/thesis-15/custom. Here’s the code:

.custom ul#tabs li {background:#909090;}
.custom ul#tabs li.rss {background:none;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#767676;}
.custom ul#tabs li.rss a:hover {
text-decoration: underline;
background: url(http://wpresser.com/wp-content/themes/thesis/images/icon-rss.gif) no-repeat;
background-position: right;}
.custom ul#tabs li a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#686868;}

Replace http://wpresser.com with your own web address.
The .custom tabs li styling will set the standard background color of the tabs not active or hovering. Feel free to change all colours.

Then what makes this stands out from the crowd? In every other guides I’ve found to add similar functionality, the Subscribtion-button also gets the background, and the little RSS-icon disappears when hovering! The styling of my .custom ul#tabs li.rss and .custom ul#tabs li.rss a:hover solves this. The first one, makes so the tab background doesn’t affect the Subscribe-button. The second one makes so the Subscribe-button will instead use the RSS-icon as background when hovering, it’ll be aligned to right, and the text-decoration is set to underline. Of course you can change this too, but I like it this way.

Tagged as: CSS, Customization, Navigation, Thesis