Hi!
Try adding this custom css:
@media only screen and (max-width: 719px) {
#nav-header.nav-container { border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
#nav-header .nav-toggle { border-left: 1px solid #eee; color: #444; -webkit-box-shadow: none; box-shadow: none; }
}
The reason you have trouble there is because the menu wasn’t really designed to work with white as color.
Thanks, Alex! It worked! 🙂 2 questions:
1. Will this fix it on mobile and tablets?
2. Is there an easy way for me to make it say “menu” on the left for the mobile/tablet devices. If it’s too complicated, no worries.
I am so grateful for your wonderful support.
Naita
1) This will fix it for mobile – tablets use the same view as desktop, so it should be fine there!
2) Yup! Edit header.php with a child theme and locate (the second spot for header menu, so it’s not topbar):
<div class="nav-text"><!-- put your mobile menu text here --></div>
And do like:
<div class="nav-text">Navigation</div>
or something similar. And then add some css styling as you wish:
#nav-header .nav-text { color: #444; font-weight: 600; }
