Sub menu on mobile

• 

  hendersonrob · Member · Aug 7, 2020 at 12:13 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m stuck on a problem with the way sub menu items appear on my menus.

  On the standard view, the submenu items have a white background and dark green text. But on mobile, the white background disappears so I have dark green text on a dark grey background which is not ideal.

  here’s the site: https://jesmondhealthpartnership.co.uk/

  I’ve tried lots of different bits of css I’ve seen, but none seem to solve them problem for me, so any advice would be very greatly appreciated!

  Thanks, Rob.

  The blog I need help with is: (visible only to logged in users)

• 

  slantedplanet · Member · Aug 7, 2020 at 4:36 pm

  • Copy link

  Hello Rob!

  Looking at your site, I prefer to change the submenu text color on smaller displays. Here is the CSS I used to do that:

  
  
  #site-navigation ul ul a {
      color: #A7D9E1;
  }
  
  @media screen and ( min-width: 45em ) {
  	#site-navigation ul ul a {
      	color: #044048;
      }
  }
  
  

  This CSS sets the submenu text to a lighter color I pulled from the mobile header. Let’s call it tinted sky. :-) For larger displays where the white background is present for submenu’s, the color switches back to the darker submenu color you have as the current default.

  If you were going to set a background color on the menu for mobile, it looks better to me if it’s applied to the entire menu as in:

  
  .main-navigation {
  	background-color: red;
  }
  
  

  (red color chosen for demonstration purposes, replace with your own preference) But it will be challenging to find a background color that works with light top-level menu text and dark submenu text. Of course, you can tweak those colors to be more similar, but…changing the submenu text color is a simpler solution.

  Please let us know how this works for you.

  Your WordPress.com plan includes live chat support including help with CSS issues like this. Staff frequently recommends live chat support as an interactive way to get help faster. Good luck with your changes!