- This topic has 5 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
Hello,
could you please give a code to individually customize hover color of each header category?
I basically want to have a different hover color for each individual category.
My website is https://lifecobra.com
Thank you
Hi @irfanisrael,
Thank you for your question.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; }Please change the hover color in the above shared CSS code for each menu items.
Best regards,
Shufflehound teamHello,
it works, but pages and posts in the top header and the footer also have this effect, is there a way to only target the header?
Thank you
Solution for this topic
To resolve that please try using below custom CSS code instead of above.
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; } #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a { color: #d61c1c !important; }Awesome, it works, thank you very much
You are most welcome here 🙂
