How to change the background color of your Top Menu using Thesis WordPress theme

A tell tale sign of a typical blogs/websites developed using Thesis wordpress theme without much customization is the grey color top navigation bar. I am also not sure why that the default position of the navigation bar is above the header image and not below it.

You can see what I mean by the sample Thesis page provided below (took the sample page from diythemes):

If you wish to change your top menu into something totally bombastic, then this tutorial would not help you because you would need to:

  • get someone to design the navigation menu
  • add in the custom CSS code

Since our objective is just change the background color of the top navigation tabs, you can achieve it by going to your WordPress dashboard> Thesis > Thesis Design:

Change navigation bar colouring

See the “Thesis ColorScale”? Click on it and a rich color scale palette would appear right before you. As you click on one of the colors, the colored boxes on the “links”, “borders & highlights” and “interior BGs” will change.

Take note that navigation menu background color follows the “interior BGs” color tone. You may try different color combinations till you are happy with the color displayed on your “interior BGs” box.

I selected the color palette of what you see above and was able to have my top menu navigation bar’s background color of one of my previous sites change from the usual grey to the color you see below:

The navigation bar was previously the typical signature Thesis theme grey color. I have included a screen shot of the site here because I know I would be revising the site design from time to time.

Also, don’t panic if the changes are not seen immediately after you save the changes in your Skin Design page. I have done it across my sites and noticed it is not updated immediately however the new color scheme is available the next day after I login to the sites. You can try it after sometime to access from your mobile phone to see of the new color scheme is correctly reflected on your site.

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top