How to get Menu Items Hover Colors Based on Categories?

Buck­et theme gives you the option to select a dif­fer­ent col­or for every sin­gle post cat­e­go­ry.

This arti­cle will show you the steps that you have to take if you want to change the col­or of the menu on hov­er for every cat­e­go­ry but­ton.

In this exam­ple we will use four cat­e­gories: Trav­el­ing with the blue col­or, Week­ly Pics with the yel­low col­or, Cul­ture with the pink col­or and we’ll use green col­or for Gear cat­e­go­ry.

The menu right now is look­ing like this:

First of all, we have to change the col­or for every cat­e­go­ry, as we said. This arti­cle will show you how to make those changes:

After you’ve done all that, we will need some cus­tom CSS to cus­tomize our menu but­tons.

In this exam­ple I used Chrome brows­er to find the ele­ments that we need.

First of all, we need to open the ele­ment inspec­tor. Right click on Home but­ton then click “Inspect ele­ment”.

On the bot­tom of the brows­er we’ll find a list with all the ele­ments from our menu:

Now we need to iden­ti­fy the id for every ele­ment from the menu.

The Home but­ton has the id: nav–top__item-289Trav­el­ling has nav–top__item-291, Week­ly Picks has nav–top__item-293Cul­ture but­ton has the id: nav–top__item-290 and Gear has the id: nav–top__item-292.

Now that we iden­ti­fied the id for every but­ton from the menu, we’ll need only the cus­tom CSS that will change the hov­er col­or. Just copy all this code on Theme Options -> Cus­tom Code -> Cus­tom CSS field.

The CSS code that will help to change the hov­er col­or for is:

#nav–top__item-291:hover { bor­der-bot­tom-col­or: #1e73be; }

In this code, we change the hov­er col­or (#1e73be) of the but­ton with the id nav–top__item-291 and this is the Trav­el­ling but­ton.

We need to have this code for every but­ton, but we only have to change the id and the col­or for each but­ton.

For Week­ly Picks we’ll have the fol­low­ing code:

#nav–top__item-293:hover { bor­der-bot­tom-col­or: #eeee22; }

Cul­ture will have this code:

#nav–top__item-290:hover { bor­der-bot­tom-col­or: #ff4c7c; }

And the Gear but­ton:

#nav–top__item-292:hover { bor­der-bot­tom-col­or: #81d742; }

After all the changes, your menu will have a new look on hov­er:

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

Updated on April 21, 2017

Was this article helpful?