Behavior doesn't match designer (nav menu showing on iPad instead of hamburger)

Hello,

My dev team has informed me that on the iPad Pro, the full nav menu is showing, whereas the hamburger should be showing instead…

Here’s what I see in the designer:

And here’s what we see on iPad Pro (and when hitting F12 and selecting iPad pro):

This seems to be a glitch… any help would be appreciated.

Thanks!


Here is my site Read-Only: LINK

On iPad it,s normal that the regular menu is showing, has Always been like thar i landscape. In portratit is showing hamburger

Hello,

Thanks for your answer. It was not like this before… regardless, I would very much like to know how to modify it so that this doesn’t happen.

It has always been like this. It’s because the breakpoints are based on pixels, and the iPP has a resolution which, in landscape orientation, puts it into the desktop breakpoint. iPad (2018 6th as well) will only load the tablet breakpoint in portrait orientation.

There is likely a custom code way to force the browser to load the tablet breakpoint by sniffing the browser, but you’re likely going to get some weird behavior depending upon how you’ve sized things.

I would also point out that your Nav layout breaks at anything smaller than 1150px. It is always a good idea to check your design by going into preview and making the window bigger/smaller. Your users could be viewing your site on a netbook or just in a browser window on a laptop that isn’t fullscreen, and the nav will be broken for them as well.

The fix is to take your Nav element and make the height auto instead of 100px.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.