Menu not showing correctly on mobile.

pfmedia · July 2015

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.)

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

any suggestions?

Albert · July 2015

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!

pfmedia · 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.

Albert · July 2015

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.

pfmedia · July 2015

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.

Albert · July 2015

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.

pfmedia · July 2015

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!

Albert · July 2015

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.

Menu not showing correctly on mobile.

Comments