Archived topic
Can I give 2nd level sub-menu its own colorscheme by using CSS
3 replies · Started by Michael Andersen on March 18, 2019
Viewing posts 1–4 of 4
Hi,
This is the CSS I use to format my 1st level Sub Menu:
/*** SUB-MENU ***/
/* Submenu */
.main-navigation .main-nav ul ul li a {
background-color: #d5d5d5 !important;
color: #333 !important;
}
/* Submenu - hover */
.main-navigation .main-nav ul ul li:hover > a {
background-color: #666 !important;
color: #f5f5f5 !important;
}
/* Submenu - current */
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
background-color: #999 !important;
color: #f5f5f5 !important;
}
Can I by using CSS create a equivalent colorscheme for 2nd level sub menu?
See graphic.
Hi there,
The submenu colors are actually in the customizer so no CSS needed:
https://www.screencast.com/t/SgykkVNR
And you definitely don't want to add !important to every single piece of CSS either.
For the third level menu item, try this CSS:
.main-navigation .main-nav ul ul ul li a {
background-color: #fff;
color: #000;
}Hi,
Thank you for your quick response. The CSS code worked fine.
And thanks for the tip regarding !important. I removed it and the remaining code still works.
/Michael
No problem :)
This archived topic is closed to new replies.
