I searched support for how to customize the mobile menu, I want the menu colors to be the same as on the PC.
I found this CSS snippet in a thread and put it in the Customize CSS in Appearance. I also updated the CSS editor.
Still, I could not figure out how to change the mobile menu background & hover colors, etc…
Here is the snippet I inserted:
/* Mobile Nav */
.mobile-nav-frame {
background: rgba(255,255,255,0.5) !important;
}
.mobile-nav-frame .title h3 {
color: black !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important;
}
.mobile-nav-frame ul {
background: #ffffff !important;
border: 1px solid #111 !important;
}
.mobile-nav-frame ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.mobile-nav-frame ul li a.link {
color: #3ab2c0 !important;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important;
}
Hi Lenny
Thanks for your question.
Unfortunately, the mobile menu doesn’t have Customizer settings at the moment. The Custom CSS rules above can be used to change the menu’s colors. Did you have a chance to change the color values? The above values are default, without any change the above rules wouldn’t reflect any changes.
/* Mobile Nav */ .mobile-nav-frame { background: rgba(34,34,34,0.5) !important; } .mobile-nav-frame .title h3 { color: white !important; text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important; } .mobile-nav-frame ul { background: #212121 !important; border: 1px solid #111 !important; } .mobile-nav-frame ul li { border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } .mobile-nav-frame ul li a.link { color: #F3F3F3 !important; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important; }For example, if #F3F3F3 isn’t changed, no change will show because that’s the color already being used.
rgba is a way of stating color and opacity, here is more on that:
http://www.w3schools.com/cssref/css_colors_legal.asp