Tagged: hover color, main menu
Hi,
The last item in my main navigation menu is set as a Button Style. My Theme Options are set as follows:
General Styling > Logo Area: Primary Color = #ff7622 and Highlight Color = #525557
Advanced Styling > Main Menu Links = #525557, Main Menu Links = #ff7622 ((Apply only to mouse hover state), Main Menu sublevel Links = #222222, Main Menu sublevel Links = #ff7622 (Apply only to mouse hover state)
The text in the Button Style item on hover disappears because it is taking on main menu hover color (#ff7622). How can I specifically target the hover color of the button item to be different? I would like it to be #cfd0d2.
I tried to figure it our using Firebug but couldn’t.
Thanks
Hi akmhou!
Please try the following in Quick CSS under Enfold–>General Styling:
#menu-item-144 a:hover{
color:grey !important;
}
Best regards,
Rikard
Hi Rikard,
Thanks for your reply.
I applied you suggested CSS to Quick CSS, that didn’t work I also tried adding it to my child theme CSS and that didn’t work either.
I made sure !important; was there in my CSS.
Any other suggestions?
Thanks
Hi!
Please try using following code instead
li#menu-item-144:hover>a>.avia-menu-text {
color: #cfd0d2!important;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field
Best regards,
Yigit
Hi Yigit,
Perfect! That worked like a charm.
Thanks a lot for your quick help.
Mark this as resolved.
Regards,