Fixed Element not showing on top

Hello everyone

I’m really frustrated. I tried everything I found on the Internet to solve this but nothing is working.
When I try to position something (like a Navbar) with fixed positioning on top of the page, it’s always beneath the hero-pic and some Headlines on the whole page. I just can’t get it to work properly. I hope someone can help me and tell me what I did wrong.

In the shared link you will find the element on the mobile pages.

Thank you


Here is my site Read-Only:
https://preview.webflow.com/preview/praxis-avalon-58814a266bc5ce0d6eb085b14?preview=d40e460af627e77ff3db52e6b9f22ac9

Set Z-Index

Also put the Fixed element out of the “HERO” (The nav is seperate element)
image

If it would be something as easy as setting the z-index I wouldn’t have the problem. The z-index is already at 5000 and hero pic at 1.

Thanks for the other tip. Didn’t see that one

Great. Mark as solve if the problem solve (To close this Q).

It’s not solved at all. Sorry if sounding rude.
The other tip was about the box inside the hero-pic but it doesn’t solve the issue about the fixed positioning showing below heropic.
Did you try to solve it on my website? It’s simply not working.

Yes.

  1. move the menuBoc one level up (from .HeroPic wrapper)
  2. use higher number for Z-Index (Not auto!)

auto Sets the stack order equal to its parents. This is default

3. IMPORTANT

Now i see you use absolute position and not fixed !! so change the CSS to fixed

I really don’t know what I’m doing wrong…I did everything you said and it still looks like this:


OK I got it now. It’s apparently a Safari bug. I tried it in Chrome and it’s working perfectly now…as intendant.
Will report the bug.
Thank you for your help. Much appreciated

1 Like