Mobile Menu Q and Disappearance on tablets

• 

  maffswe · Member · Dec 8, 2014 at 4:24 am

  • Copy link
  • Add topic to favorites

  1. The main menu (top.nav) disappeared yesterday when i viewed it on my Asus tablet. I can see it just fine on my regular desktop though.
  Ive tried erasing all css, using extreme margins to try and find it but to no avail. The only thing that makes it visible is if i set it to both primary and top location at the same time. If anyone could be so kind and tell me if the header menu is visible on their tablets or any other help would be much appreciated.

  2. My theme (Massive Press) does not seem to switch to the mobile block with three stripes thats commonly used. Instead it shows a little button that says “Menu” and pressing it shows the main menu categories. It does however not show the sub-menu options, even when clicking with a mouse.
  My question is the following.
  1. Any options to getting the standard mobile http://css-tricks.com/three-line-menu-navicon/
  2. Are there any display properties that can be setup so tablet and mobile users can bypass the hover problems when dealing with sub-menus?

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

• 

  hallluke · Member · Dec 8, 2014 at 3:42 pm

  • Copy link

  Regarding your question about modifying the theme to expand to show the sub-menus on smaller screen sizes you might be better off asking the theme developer if there are any plans for such an update on the Massive Press theme forum – as this is something that would probably have substantial benefits for all of the theme purchasers.

  If they say it’s not something that’s likely to happen anytime soon then let us know and we can look in to a CSS solution.

• 

  designsimply · Member · Dec 31, 2014 at 2:53 pm

  • Copy link

  It does however not show the sub-menu options, even when clicking with a mouse.

  I reported this as a bug to the theme author to see if they would be willing to make a change to update the theme’s menus to work better on mobile devices.

  1. Any options to getting the standard mobile http://css-tricks.com/three-line-menu-navicon/

  This is up to the theme author. It appears they’ve made a design decision not to use the three line menu icon. Actually, in user testing, the three line icon doesn’t test well with most users, so it’s actually not my personal preference and I think the word menu is much better. If you would like to make a change to the menu label anyway, you can probably swap out the text with an image of a three-line icon if you upload it as an image to your media library first. I can help you with that if you’re interested, but I really think you should give the word “menu” a chance. :)

  2. Are there any display properties that can be setup so tablet and mobile users can bypass the hover problems when dealing with sub-menus?

  You could try this, however, I would recommend waiting to see if the theme author is willing to fix the submenus for mobile directly in the theme first. If you want to go ahead and try to change the display properties, I can get you started and give you some direction and it will take some work on your part from there to do a customization like that. Here is the basic display property that will make the submenus always display on browser widths that are 1024px and smaller:

  @media only screen and ( max-device-width: 1024px ) {
  	.site-navigation .sub-menu {
  		display: block !important;
  		position: relative;
  		left: 20px;
  		width: 100%;
  	}
  }

  You can adjust the 1024px to whatever you think works best, and then you will need to adjust the other values such as 20px as needed from there.