Font Color For Child Submenu
DM
Daniel Michaels
If I have more than one child for a menu item in the Artolio template, the last child menu font color is not correct. It appears white instead of dark. It is only visible when hovering.
See attached. [https://drive.google.com/file/d/1Nq75kVZIpa63K08dhiRPEEigDm1xWYCs/view?usp=sharing]
Note: this site is under development on localhost, so I cannot provide a link yet.
Website
https://www.newmanstudies.org
2 Answers
Order by
Oldest
Paul Frankowski
Accepted AnswerHi Daniel,
try that Custom CSS:
.sp-megamenu-parent .sp-dropdown li.sp-menu-item a ul li a {color: #333;}
DM
Daniel Michaels
Accepted AnswerThank you for your fast reply as it helped me narrow down where to look for the classes.
I couldn't get that particular code to fix the problem, but after some testing and sleuthing, I got it to work.
/* Base: let theme control default link color */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item ul li a {
color: inherit !important;
}
/* LIGHT MODE (or anything that's not Dark):
keep white text on the dark hover chip */
body:not([data-sppb-color-mode="Dark"]) .sp-dropdown-sub .sp-dropdown-items > li.sp-menu-item > a:hover,
body:not([data-sppb-color-mode="Dark"]) .sp-dropdown-sub .sp-dropdown-items > li.sp-menu-item > a:focus {
color: #fff !important;
}
/* DARK MODE:
last level hover chip is light, so make text dark */
body[data-sppb-color-mode="Dark"] .sp-dropdown-sub .sp-dropdown-items > li.sp-menu-item > a:hover,
body[data-sppb-color-mode="Dark"] .sp-dropdown-sub .sp-dropdown-items > li.sp-menu-item > a:focus {
color: #111 !important; /* or var(--bs-body-color, #111) */
}