Mobile menu issue with iphone 5 and 6

Share link

I made a mobile menu where the overlay section with the menu buttons is moved 100% to the right, made 0px wide and display: none.

And the opposite when you press the menu button.

But, on Iphone 5 and 6 the behavior is strange. on 5 it works until you open the menu and then closes it. When closed you can sidescroll on the page, like the menu is to the right.
Or it takes up room on the top when its opens. Screengrab is from an iphone 5 and safari.

On the 6 its messed up after open and close, then if you turn the phone to landscape and back, its fine again.

Loving your website! The iPhone is creating extra room for the content as it switches to Display: Block and commences the 300ms transition. If you wrap your content in a div with 100% width and the overflow hidden, it should prevent the iPhone from doing this.

Try this:

1: Drop a div block into your project and create a new class for it called “wrapper” (or anything you’d like).

2: Set the width to 100% and the overflow to hidden.

3: From the Navigator window, drag each of your sections into this new div.

Share link

Thank you @McGuire
I done that now. Makes sense.
Same issue still. Nothing changes on Iphone 5/safari.
It works on every page on my phone ( android/chrome) except here. That is so strange I think.

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