Streaming live at 10am (PST)

Sticky Header not overlapping elements

I am working on a client’s project and I’ve come across a really strange issue.

Whenever I set the header position to sticky, the header isn’t actually sticky as it appears to be transparent in the background.

For example, on the products and categories template pages, the header is under all the other elements, if you open the cart, you will see the issue multiply.

I had the header inside a container to help wrap overflow, however even removed from the container the issue persists.

Another example image:

What could be causing this issue? I am stumped on this one.


Here is my site Read-Only:

https://preview.webflow.com/preview/half-saint-clothing-b38826d272cb27f8ce3?utm_medium=preview_link&utm_source=designer&utm_content=half-saint-clothing-b38826d272cb27f8ce3&preview=f81ebadfa4192351f0ac33a43ad95a6a&pageId=60fed20c1ba4e402fa1c706b&itemId=61ba4d88d9d4f247bfe9116a&workflow=preview

Hi,

you need to set “z-index” to higher value, usually if an element should be on top of everything “z-index” is set to “9999”.

Thank you!

That solved that main issue. The header now works on every page except for the home page where it doesn’t stick

Kaleb Gookins