Menu not showing correctly on mobile.

edited July 2015 in Menu / Mega menu
Hello,
When viewing the site on mobile the mobile menu doesn't display properly. The body content somehow gets in between the menus background color and the menu items.
Here is a image of the issue taken from and iPhone 4. (This issue has also been duplicated on Android devices as well.)

image

Here is what the site looks like in mobile without the menu selected:

image

any suggestions?

Comments

  • Hi,

    please send us url to site where you got this problem and we'll have a look on it (url from images does not work because site keep loading and nothing happen).

    Thanks!
  • edited July 2015
    Sorry for the delay. We just made the site live. Menu issue still exists. The website can be accessed at http://masteryourimage.com

    The url from the image (http://apmasterimages.promediaonline.com) should have worked. That is the development address for the site but it still should have worked. The above link is the live version of the site. Please let me know if you have trouble accessing it.

  • In which browser you got this problem? Because this is how it looks like on our side http://pasteboard.co/1ZBZAI0E.png and in our mind all is fine.
  • I viewed the site from an iPhone and Android Phone. You will have to look at it with the actual device. When you resize the browser to mobile dimensions the menu does function correctly. When viewing it on an actual mobile device is when it messes up.
  • Ok, you're right. But it is not related with theme itself at all. This problem must be related with one of your plugins or custom css. So we recommend to deactivate all plugins and remove custom css in case. If you will look on our demo, you see that it does not work the same way as on your site.
  • Spot on! I did find the offending custom CSS snippit:

    #Header_wrapper { background-color: transparent; max-height: 130px;}

    I updated it to:

    #Header_wrapper { background-color: transparent; max-height: 130px; z-index: 999; margin-bottom: 40px;}

    I added a z-index and a 40px bottom margin and it looks good on iOS and Android now.
    Thanks!
  • We're glad to see that you sorted it but as we wrote above the problem is somewhere else. It's great that you sorted one thing but the plugin or tool that cause this issue, may bring another issues in the future.
Sign In or Register to comment.