Site logo

Archived topic

Change sub sub and sub sub sub menu colors

7 replies · Started by Gelu-Dănuț on April 15, 2022

Viewing posts 1–8 of 8

Hi Gelu,

Kindly try adding this in Appearance > Customize > Additional CSS:

div#primary-menu ul.menu > li > ul.sub-menu > li > a {
    background-color:rgb(255,0,0);
    color:rgb(255,255,255);
}

div#primary-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    background-color:rgb(0,255,0);
    color:rgb(0,0,0);
}

Kindly change the color values to your preference: https://htmlcolorcodes.com/color-picker/

Hope this helps! Kindly let us know how it goes. :)

Thank you. Is it possible to change the colors for hover color and current color?

Try this for hover and current.


div#primary-menu ul.menu > li > ul.sub-menu > li:hover > a,
div#primary-menu ul.menu > li > ul.sub-menu > li.current-menu-item > a {
    background-color:rgb(255,0,0);
    color:rgb(255,255,255);
}

div#primary-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li:hover > a,
div#primary-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a  {
    background-color:rgb(0,255,0);
    color:rgb(0,0,0);
}

Thank you!

You're welcome

I don't think I managed to make them different, especially in the case of the mobile menu. :(

OK - lets backtrack.
Remove any of the CSS provided in this topic.

Then go to Customizer > Colors --> Primary Navigation and there you will see:

Sub-Menu Background
Sub-Menu Text

You can change the colors there.

This archived topic is closed to new replies.