[Jayd KParticipant]

Hi there,

I am trying to change the colour of the background of the menu when it is hovered over.
I have looked through the forums and can only find codes that don’t seem to work for me.

The effect I am going is at the following website:
https://london.fantasticservices.com
The idea is for the words to change colour to pink on hover (in the main menu)
and then for the background of the sub menu to appear pink on hover (sub menu)

Let me know if this is possible. The second one is more important.
I also want to remove the double arrows in the main menu.

http://www.roza93.co.uk/preview/

Many thanks and looking forward to your response!

Jayd

[NicoModerator]

Hi There,

Thanks for writing in.

To ensure your more appropriate answer or CSS code to be added in your customizer’s custom CSS. Would you mind sharing us your admin credential so we could take a closer look on your setup.

Don’t forget to set it as private reply.

Meanwhile you could add this in your customizer’s custom css to remove the double arrow.

.x-navbar .desktop .x-nav li>a>span:after{
content:"";
}

Hope it helps.

Once we got the information we’ll do our best to help you.

Thanks.

[Jayd KParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Jayd,

Please add following CSS under Custom > CSS in the Customizer:

.x-navbar .x-nav-wrap.desktop .x-nav > li > a:hover {
    color: #b74163;
}

.x-navbar .x-nav-wrap.desktop .x-nav .sub-menu > li > a {
    padding-left: 1.75em;
    padding-right: 1.75em;
    margin-left: -1.75em;
    margin-right: -1.75em;
}

.x-navbar .x-nav-wrap.desktop .x-nav .sub-menu > li:hover > a {
    background-color: #b74163;
    color: #fff;
}

Thanks!

[Jayd KParticipant]

THATS AMAZING!! Omg just what I needed, thanks so so much!!!

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts