Menu not showing correctly in tablet/small screen view

• 

  gratefulgrazer · Member · Apr 10, 2015 at 10:48 pm

  • Copy link
  • Add topic to favorites

  I am using the Hemingway Rewritten theme and recently added CSS to center and change the colors of my main menu. The menu now does not appear on tablets or small screens. When I click on where the menu should be, my options appear, but with a dark gray background. I would like the menu to be black font with white background. Any advice would be greatly appreciated, thanks!

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

• 

  thesacredpath · Member · Apr 11, 2015 at 4:47 pm

  • Copy link

  Hi @, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest posting in the volunteer-based WordPress.org Themes and Templates forum and then tag your thread with wpcom-themes so that the support staff will see it.

  For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

  The differences between WordPress.com and WordPress.org.

  I did take a quick look, and I would suggest that you use a media query to limit whatever changes you made to the navigation to 801px and wider like this:

  @media screen and (min-width: 801px) {
  all your menu related rules here
  }

  Example:

  @media screen and (min-width: 801px) {
  .main-navigation {
      background: none repeat scroll 0 0 #fff;
  }
  .main-navigation li::before {
      color: #fff;
  }
  .main-navigation ul ul li {
      background: none repeat scroll 0 0 #fff;
  }
  .main-navigation a, .main-navigation a:visited {
      color: #000;
  }
  }