Archived topic
A challenge! Possible to customize menu icon color separately?
5 replies · Started by Stephen on December 17, 2020
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
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!
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
No problem Chris!
Glad to help :)
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/
Let's add this:
.main-navigation .main-nav ul li:hover > a.menu-image-not-hovered {
background-color: transparent;
}