iOS browsers displaying primary menu, not mobile menu on iPhone 6 Plus

[Jarrett]

Jarrett

February 10, 2016 at 10:47 am

Hello! 🙂

I’ve got a peculiar problem on several websites that I’m building with the Virtue theme.

When using my iPhone 6 Plus, whether in Safari iOS 9.2.1 or Chrome v48, *most* of the time, the menu being displayed is actually the Primary Menu, not the Mobile Menu. *Sometimes*, on Safari, it will display the proper Mobile Menu.

This one menu is selected to be displayed in both Primary and Mobile. When I disable it from Primary, it disappears from the browser. When I disable it only from Mobile and leave Primary on, I still get the Primary menu.

Oddly, when using Chrome on the PC and activating the developer tools and device spoofing, the menus react properly depending on the size of the viewport.

So it doesn’t seem to be a global problem, only a device-specific problem. There’s a chance that some custom code of mine is to blame (css/javascript) but I haven’t messed with the PHP files of the theme. Furthermore, it happens on multiple sites, on which I have some similar and some different code. None of my JavaScript is designed to react to different viewport sizes, so I would be surprised if my custom code were to blame.

The problem arose more recently, I’d say over the last few days. I keep all my themes and plugins up to date. I do use a lot of similar plugins, so maybe it’s a plugin’s fault.

But I think it coincided with an update to Virtue v3.4.7.

Any help would be awesome.

Here are a few of the sites where I’m encountering this issue:

*Login to see link (broken on safari & chrome)
*Login to see link (broken on safari, not chrome)
*Login to see link (not broken on either mobile browser, but configured almost exactly alike)
*Login to see link (broken on safari, not chrome)

Imgur album of images showing the problem: *Login to see link

Any help would be greatly appreciated! 🙂