Nav menu on tablet and phones not showing correctly

Design help General
1

Here is my site Read-Only: https://preview.webflow.com/preview/peanut-studio?utm_medium=preview_link&utm_source=designer&utm_content=peanut-studio&preview=2e2a45f52cfaa809defd7e837500f9e7&pageId=5e88a4c5a6b2c1ecd6a19d42&mode=preview

I have created a simple nav menu, it enters from the right side of the page and should cover all content except the logo and menu icon.

When I test the menu on desktop in preview mode it works fine. When it’s published and tested on a browser on a desktop it works fine. But when I test it on tablet and mobile the menu is underneath the heading text. I have set the z-index of the menu to 100, the logo and menu icon to 101, and the heading text to 1.

Any ideas why this might be happening? I have cleared all cookies etc and also tested it on various phones.

URL: peanut.studio

IMG_3175.PNG
IMG_3175.PNG450×800 39.4 KB

2

Hi

Did you solve this issue - I wonder how/ share :slight_smile:

3

Hi @shokoaviv ,

Sorry I should have sent an update.

I’m not sure what the issue was, it must have been a bug with Webflow but I’m not sure what caused it. I deleted the hero section and rebuilt it with all the same classes and for some reason it works now.

1 Like
4

Hi @shokoaviv

I just realised the problem. The hero text had a ‘move’ animation that went from (initial position) ‘z: 1’ to (end position) ‘z: 1’ and this is what caused the text to be above the menu, even though the menu’s z-index is 100. Does that make sense?