Menu in mobile view issue

Hi, Beth. The problem is that in your custom CSS, you set the background color of the mobile menu to white from it’s original black color without also changing the color of the menu text, which by default is also white, so you are ending up with white text on a white background. That’s why it looks strange.

Add this rule to your custom CSS to make the menu text black:

@media only screen and (max-width: 60em) {
   /* Make default menu color black */
   #main-navigation li a {
      color: #000;
   }
}

Your menu is still going to look a little strange because there’s no contrast between the white background of the menu and the white background of the content, i.e., the two are going to blend in together, but at least you’ll be able to see the menu items. You can add a bottom border to the mobile menu with an additional rule:

@media only screen and (max-width: 60em) {
   /* Make default menu color black */
   #main-navigation li a {
      color: #000;
   }
   /* Add dotted border to bottom of menu */
   #main-navigation ul {
      border-bottom: 1px dotted #000;
   }
}

Hi, Thank you

I did not realize that I did that. i was having an issue with the menu being black and the text not being readable. I did not know how to change just the color of the text in that menu without affecting the whole site.

So in your opinion, do you think for this in particular using perhaps the responsive menu plug for the mobile version be a better way to go?

B

I don’t have any experience with the Responsive Menu plug-in, so I can’t recommend one way or the other. You can always give it a try to see how it looks. But you should be able to solve most most issues with the theme’s mobile menu, especially colors, using CSS.