How to individually change hover effect on nav menu items

Support
#1

Hi, Im using X Pro Icon and would like to change the hover effect on the nav menu items individually. How can I achieve this?

Thanks
Rena

#2

Hi Rena,

Unfortunately this feature is not available out of the box for Pro menu items. You will have to write a custom CSS for each menu item hover effect to achieve this.

#3

Ok, I assumed so and I was trying to figure out the name of them by using the inspector but nothing I did worked. What would be the name of these individual menu items in order to style them? My site is palilastudio.com

Thank you!

#4

Hi There,

You can add the following CSS to Theme Options CSS and adjust the colors according to your wishes:

.hm3.x-menu > li#menu-item-39 > a:hover {
    color: blue;
}

.hm3.x-menu > li#menu-item-563 > a:hover {
    color: red;
}

.hm3.x-menu > li#menu-item-751 > a:hover {
    color: green;
}

.hm3.x-menu > li#menu-item-330 > a:hover {
    color: red;
}

.hm3.x-menu > li#menu-item-128 > a:hover {
    color: #222222;
}

.hm3.x-menu > li#menu-item-754 > a:hover {
    color: red;
}

Hope it helps

#5

Thank you!

#6

Glad we’re able to help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.