Sub-menu colour change

Shapely
1

Hi,

How do I change the text colour and background colour when the mouse is hovering over a sub-menu and when it is not?

Your help is much appreaciated.

Thank you

2

Hi @shahidul,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

.menu > li > ul > li > a {
    color: #fff;
    background: #000;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

The above CSS code will change the color of background and text of submenu but to change its color when hovering over item you have to also use the below CSS code.


.menu > li > ul > li:hover > a {
    color: #000;
    background: #fff;
}

Best Regards,
Movin

3

Hi Movin,

For some reason the text is not white and the sub menu does not show the right colour. I have tried the code below and it works for me.

.menu li a {
    color: #ffffff;
}
.menu > li > ul > li > a:hover {
    color: #ffffff;
    background: #000000;
}

Will there be any issues with where i placed the hover.

I also placed this code before the hover code but nothing happens.

menu > li > ul > li > a{
    color: #000000;
    background: #ffffff;
}

For some reason white is shown as grey.

4

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

5

The site is Link
The menu at the top is the issue and it is the same across the website.

I have just noticed that the text colours are darkened in the menu section. They show their true colours on hover state.

So can you please help me to remove this ‘darkened’ state of the main and sub menu. I would like to determine the normal and hover state of the menu and sub menu.

Thank you.

6

I can see on your shared site that the above shared CSS code by me is working fine in browser inspector but it doesn’t work with your other custom CSS code due to conflict.

To force it to work you can append the above CSS code with #page as following.

#page .menu > li > ul > li > a {
    color: #fff;
    background: #000;
}

#page .menu > li > ul > li:hover > a {
    color: #000;
    background: #fff;
}