Responsive Dropdown Menu

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; }