Archived topic
Indentation and background color according to menu level
3 replies · Started by Avi on March 3, 2022
Hi,
I am using GP Premium's "Target" theme.
How can I introduce indentation and background coloring according to menu level.
For example:
The first level menu should have no indentation or background color
The second-level submenu should have 1 indentation and green background color
The third-level submenu should have 2 indentation and yellow background color
Please help me with this.
Best regards,
Avi
Hi Avi,
To change the color and add spacing for sub-menu items, you can try adding this custom CSS:
#primary-menu > ul > li > ul.sub-menu{
background-color: rgb(0, 250, 0);
padding-left: 10px;
}
#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu{
background-color:rgb(250, 250, 0);
padding-left: 20px;
}Kindly replace the RGB values to your preference: https://www.w3schools.com/colors/colors_picker.asp
Kindly replace the padding values to your preference as well.
You may also use Global colors as an alternative:
#primary-menu > ul > li > ul.sub-menu{
background-color: var(--accent);
padding-left: 10px;
}
#primary-menu > ul > li > ul.sub-menu > li > ul.sub-menu{
background-color: var(--base-2);
padding-left: 20px;
}You may create new Global colors in Appearance > Customize > Colors and replace accent and base-2 with the CSS variable name you’ll specify: https://share.getcloudapp.com/nOuRdN9L
also see: https://share.getcloudapp.com/kpuJPYgD
Hope this helps! :)
Hi Fernando,
These are exactly the information I was looking for.
Thanks for the detailed explanation. You rock!
I'm closing this ticket.
Have a good one!
You’re welcome Avi! Glad it works. Have a good one as well! :)
