Archived topic
how to change mobile menu background color?
5 replies · Started by Rafał on March 4, 2021
/* rounded widgets */
.separate-containers .inside-article, .sidebar .widget {
border-radius: 10px;
}/* sticky menu white bg */
.main-navigation.navigation-stick,
.main-navigation.navigation-stick ul ul {
background-color: #fff;
}.main-navigation.navigation-stick .main-nav ul li a,
.navigation-stick .menu-toggle {
color: #000;
}.main-navigation.navigation-stick .main-nav ul li:hover>a,
.main-navigation.navigation-stick .main-nav ul li:focus>a,
.main-navigation.navigation-stick .main-nav ul li.sfHover>a,
.main-navigation.navigation-stick .main-nav ul li[class*="current-menu-"]>a {
background-color: #fff;
color: #9147ff;
}/* underline menu */
.main-navigation li a:after {
opacity: 0;
transition: opacity 500ms ease-in-out;
content: "";
}.main-navigation .main-nav ul li[class*="current-menu-"] > a:after,
.main-navigation .main-nav ul li:hover > a:after,
.main-navigation .main-nav ul li.sfHover:hover > a:after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid #fff;
position: relative;
top: -15px;
opacity: 1;
}/* underline sticky menu */
.main-navigation.navigation-stick li a:after {
opacity: 0;
transition: opacity 500ms ease-in-out;
content: "";
}.main-navigation.navigation-stick .main-nav ul li[class*="current-menu-"] > a:after,
.main-navigation.navigation-stick .main-nav ul li:hover > a:after,
.main-navigation.navigation-stick .main-nav ul li.sfHover:hover > a:after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid #9147ff;
position: relative;
top: -15px;
opacity: 1;
}
This is my CSS
my normal menu looks like that - https://imgur.com/yjt6GDA
my sticky menu looks like that -https://imgur.com/owY6Xlx
(underline is on the hover and current for sticky)
IDK how to solve mobile menu - https://imgur.com/qHjAAYX
Looks like canvas do not work
Hi there,
do you want the Mobile Header and the Mobile Menu Drop down to have a solid color ?
only mobile menu drop down I think
my "normal menu" and "my sticky menu" from first post looks fine for me
I have issue only with dropdown on mobile
You can use this CSS to do that:
@media (max-width: 768px) {
.has-inline-mobile-toggle #site-navigation.toggled {
background-color: #f00 !important;
}
}awesome
Glad to be of help
