Z-index issue in iOS Safari and Chrome

Question

I am having a problem with a responsive dropdown menu based on the Wordpress Underscores theme.

This looks fine on the desktop, but not on iOS Safari, including the iPad and iPhone.

I tried adding z-index to other divs, but it does not work. Please help me. Thanks.

Answer 1

Actually there is a fourth method, with translate3d:

-webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); 

iOS browsers fully support CSS3, so you can use it safely.

Answer 2

There are three ways to deal with this:
1. You can set the z-index to a large number, for example 80 or 90.
2. You can add a menu item after other divs (so by default it will be placed on other elements)
3. You can set the z-index of text in divs less than in a section div.

Answer 3

You can't just apply the z-index to the drop-down menu - you need to apply z-pointers to sibling elements to ensure the correct stacking order.

Without seeing your HTML, it's impossible to determine where they should go. But the best I can say is apply z-index to the whole navigation bar and one for all your content div. Keep in mind that, as Ajay said, for the z-instructions to work correctly, the elements to which they are applied must not be static (in your case, the position: relative is likely to be the best option).

Answer 4

If the parent item's dropdown menu is nav, you must add z-index to a large number exceeding the other item