Streaming live at 10am (PST)

Fixed Element not showing on top


#1

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


#2

Set Z-Index

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


#3

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


#4

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


#5

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.


#6

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


#7

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



#8

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