Mobile menus in Hemingway Rewritten look terrible when centered

• 

  jamiewkb · Member · Apr 14, 2015 at 2:07 am

  • Copy link
  • Add topic to favorites

  I was looking for a way to center the Hemingway Rewritten menus and found this lovely bit of code here in the forums to make that happen:

  .main-navigation ul {
  	text-align: center;
  }
  
  .main-navigation li {
  	display: inline-block;
  	float: none;
  }

  This code is wonderful if you’re on a desktop viewing the site. However this code makes using the menus on mobile devices a terrible experience. I’ve had to remove it until a fix is found.

  I love the look of the centered menus on the desktop. It looks as it should. The menus just don’t look right to me off center. However how can we modify this code so it doesn’t mess up the mobile menus?

  Thank you for the help.

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

• 

  thesacredpath · Member · Apr 15, 2015 at 12:50 pm

  • Copy link

  Hi there, what we can do is to use a Media Query to only center the menu at screen/window widths greater than the width the mobile touch menu activates, which is 800px, so we’ll make the media query for min-width: 801px like this.

  @media screen and (min-width: 801px) {
  	.main-navigation ul {
  		text-align: center;
  	}
  	.main-navigation li {
  		display: inline-block;
  		float: none;
  	}
  }

• 

  jamiewkb · Member · Apr 15, 2015 at 2:38 pm

  • Copy link

  That’s wonderful! Thank you so much. It looks much better on all screens now.

  One further edit if possible regarding the mobile menu format. Can the child pages in the navigation menu be hidden? Said another way, can

  only

  the main menu navigation items be shown? It would certainly clean up the mobile menus a bit. Other themes have the ability to show a small triangle next to a main menu level that indicates child (nested) menus.

• 

  thesacredpath · Member · Apr 15, 2015 at 10:07 pm

  • Copy link

  If you are fine with people not being able to get to your child pages when on devices below 800px in width (iPads in portrait orientation and smaller tablets and phones) you can add the following.

  @media screen and (max-width: 800px) {
  	.main-navigation ul ul {
  		display: none;
  	}
  }

  It has been a challenge to design menus that work well on touch devices, and yes, some newer themes have accordion type expanding submenus, but in my experience, they can be a bit hard to use, at least at this time. They will keep improving though. It is unlikely that that sort of functionality will be added back into older themes though since that can cause issues with existing sites and users.

• 

  jamiewkb · Member · Apr 15, 2015 at 11:37 pm

  • Copy link

  Thanks. Good no know. I’ll have to see what’s most important in this area.

• 

  jamiewkb · Member · Apr 15, 2015 at 11:54 pm

  • Copy link

  Well here is an unexpected treat. Turns out your code doesn’t actually prevent the mobile user from being able to access child pages like you thought it would. If you click a page from the mobile menu that happens to contain child pages, you get a drop down list of the child pages that you can click on.

  Now if we could just add the little triangle thing to indicate there are child pages we’d be all the way home, but heck, it’s a pleasant surprise anyway and better than nothing.

• 

  thesacredpath · Member · Apr 16, 2015 at 6:38 pm

  • Copy link

  Well, that is unexpected. A Happy accident?

  Change the media rule I gave you below to this.

  @media screen and (max-width: 800px){
  	.main-navigation ul ul{
  		display:none
  	}
  	.menu-item-has-children a:after {
  		content: "f431";
  		font-family: Genericons;
  		padding-left: 10px;
  		font-weight: bold;
  	}
  }

• 

  jamiewkb · Member · Apr 16, 2015 at 6:57 pm

  • Copy link

  That code puts the little triangle icon on the parent page, which is what I would want, but also on the child pages where it isn’t needed.

  If it has to be on the child pages also even though there are no child pages to a child page, then I’ll just go with the original code.

  Thank you.

• 

  thesacredpath · Member · Apr 17, 2015 at 5:20 pm

  • Copy link

  Ah, sorry, I didn’t expect that. I should have looked. Let’s modify what I gave previously to this.

  @media screen and (max-width: 800px) {
  	.main-navigation ul ul {
  		display: none;
  	}
  	.menu .menu-item-has-children a:after {
  		content: 'f431';
  		font-family: Genericons;
  		padding-left: 10px;
  		font-weight: bold;
  	}
          .sub-menu a:after {
  	       content: "" !important;
  }
  }