Tablet menu issues

[ZoePDX]

Hi,

Since we’ve updated to WordPress 4.5 our iPad menu isn’t working as expected. The icon doesn’t show up and then also if you scroll down the page the menu items appear in the middle of the page.
http://staging.brazibites.kinsta.com/

The phone works great.

Your help, as always is greatly appreciated!

[Raghavendra]

Not just iPad but Safari browser in Mac OS X has this issue.

Can you try this Custom CSS –

@media screen and (min-width: 1025px) { 
#site-logo {
width: 30%;
}

#primary-menu {
width: 70%; 
}
}

[ZoePDX]

Unfortunately this didn’t work…On Chrome, the menu icon still isn’t coming up, and when you scroll the menu tabs are appearing to the left in the middle of the page.

We’ve also just noticed some issues with the menu on Firefox and Safari.

The same issue is happening for the iPAD on both, and on Safari, the recipes tab is being dropped on the desktop version.

Your help is so appreciated, thank you!
Zoe

[Raghavendra]

I noticed that on Safari, the recipes is being moved to the next row which is expected and we need to fix that by reducing the number of menu items or by reducing font size or spacing between the menu items. I can provide the CSS for the same to accomodate the menu items but I am wondering what you mean by menu icon not showing up and what are menu tabs? Can you pls attach a screenshot with arrows pointing to issues you are seeing in Chrome or other browsers and the exact issue you are facing. On my side, things look ok. Thanks

[ZoePDX]

I can’t believe how helpful you’ve been. I am so grateful for your persistence in helping us. : )

I’ve attached a screen shot of the iPad menu issue. The problem is that when you scroll down the page, the menu items appear vertically slightly to the left of the middle of the page. This is happening with all browsers.

Hopefully this will help you troubleshoot this so we can stop bothering you with all these questions!

Thanks Ever!
Zoe

[Veena]

Actually there is not enough space for your menu items to accomodate single row in smaller screens ie below 1024px. I have seen that you have already activated mobile menu in smaller screens. So you can hide the sticky primary menu by using the below custom CSS in themeoptions –

@media screen and (max-width: 1024px) and (min-width: 768px){
#header.sticky #primary-menu {
    display: none !important;
}
#header.sticky #site-logo {
    display: block !important;
}}

And also you can remove width=180px for sitelogo at smaller screens.

[ZoePDX]

Okay.

I’ve fixed the menu issue on the desktop with Safari, thanks!

But we’re still having the problem that the mobile toggle icon isn’t showing up on the iPAD (either on horizontal or vertical) And when you scroll the page the menu items are appearing in the left- center of the screen.

Can you help with this?

Also I just noticed that now on the mobile version, our background images are not showing up in the header area. See http://staging.brazibites.kinsta.com/products on the phone.

Previous to upgrading to WordPress 4.5 these worked just fine…see http://brazibites.com/products

[Author]

Posts