How to get Menu Items Hover Colors Based on Categories?

Bucket theme gives you the option to select a different color for every single post category.

This article will show you the steps that you have to take if you want to change the color of the menu on hover for every category button.

In this example we will use four categories: Traveling with the blue color, Weekly Pics with the yellow color, Culture with the pink color and we’ll use green color for Gear category.

The menu right now is looking like this:

First of all, we have to change the color for every category, as we said. This article will show you how to make those changes:

After you’ve done all that, we will need some custom CSS to customize our menu buttons.

In this example I used Chrome browser to find the elements that we need.

First of all, we need to open the element inspector. Right click on Home button then click “Inspect element”.

On the bottom of the browser we’ll find a list with all the elements from our menu:

Now we need to identify the id for every element from the menu.

The Home button has the id: nav–top__item-289Travelling has nav–top__item-291, Weekly Picks has nav–top__item-293Culture button has the id: nav–top__item-290 and Gear has the id: nav–top__item-292.

Now that we identified the id for every button from the menu, we’ll need only the custom CSS that will change the hover color. Just copy all this code on Theme Options -> Custom Code -> Custom CSS field.

The CSS code that will help to change the hover color for is:

#nav–top__item-291:hover { border-bottom-color: #1e73be; }

In this code, we change the hover color (#1e73be) of the button with the id nav–top__item-291 and this is the Travelling button.

We need to have this code for every button, but we only have to change the id and the color for each button.

For Weekly Picks we’ll have the following code:

#nav–top__item-293:hover { border-bottom-color: #eeee22; }

Culture will have this code:

#nav–top__item-290:hover { border-bottom-color: #ff4c7c; }

And the Gear button:

#nav–top__item-292:hover { border-bottom-color: #81d742; }

After all the changes, your menu will have a new look on hover:

This article applies to Bucket, as they share the same underlying structure.

Updated on April 21, 2017

Was this article helpful?