[Resolved] A challenge! Possible to customize menu icon color separately?

[Stephen]

This is a advanced one.

After I adding two image-type icons on primary menu, I found that the background color makes the icon looking bad. See snapshot link here https://www.awesomescreenshot.com/video/2124788?key=80c51d0e88588db717f25a6bb9494b6e

Best,

Chris

[Ying]

Hi Chris,

You could add a custom class something like remove-background-hover-color to the image menu items using the wordpress menu builder.
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then add this css:

.main-navigation .main-nav ul li.remove-background-hover-color a:hover {
    background-color: transparent;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if it works!

[Stephen]

Dear Ying,
You are talented! the instruction is easy to follow, I cannot believe with your instruction, it worked well within 5 mins. Awesome support!!
GP team you are brilliant!

Cheers,

Chris

[Ying]

No problem Chris!
Glad to help 🙂

[Stephen]

Hello Ying, back to the menu background color issue, I don’t know that sometimes, it is strange that the background color shows up occasional especially when I switch to other pages and then click the menu icon image, see reference link https://www.awesomescreenshot.com/video/3171522?key=9d3fb69d674127da4c16872eb18b563f

Here is the links for your reference https://54.68.147.74/~lfs/fr/politique-des-langues/

[Ying]

Let’s add this:

.main-navigation .main-nav ul li:hover > a.menu-image-not-hovered {
    background-color: transparent;
}

[Author]

Posts