Hi there, for some reason on mobile whenever I click on the menu button, it opens up the menu but is layered under the hero image. I’ve attempted to mess around with overflow and Z-indexes with no success. It’s really strange because it shows the nav menu above on Webflow, but shows below on my iPhone. Has anyone ever encountered this problem? I have tried to recreate the entire front page using another whole project, but ran into the same problem.
Link to published site: https://oc3pl-e8e38a.webflow.io/
Here’s the picture of the actual error of the nav menu showing up behind the hero image.
It’s difficult to tell what’s going on without being able to see the problem in action. I use Android myself but do you have the published link so I/someone else can see if we can recreate the problem?
Sorry for the slow reply. I took a look and can’t seem to get the problem to occur.
I looked into it a bit and it seems like usually when you’re getting a problem like this, it’s because of some kind of conflict that’s occurring. Android picks up on the one side of the conflict and apple on the other which makes them display differently.
The only thing I could see that might be creating some conflict is the block layout of the body and the relative position on the nav. I would try going into your nav symbol and changing the position from relative to static.
Next, you’ll want to go to the body and change the display to “flex”, change the direction to “verticle”, change align to “stretch” and justify to “center”.
See if that corrects the problem.
One other thing it could be is one of the page triggers you have set. You could try removing them and publishing, see if that makes a difference, and if it does, you know that’s where the problem is.
Hope that helps, sorry I don’t have an iPhone ¯_(ツ)_/¯
