App content still goes over sticky header despite z-index tweaks

Store Design
1

Hi,

I am using the brooklyn theme.

Some content on my website, especially some apps, appears to still go over my sticky header, despite my sticky header having a higher z-index value.

For example: https://sprixybox.com/apps/builder/sprixy-fai-da-te

As you can see in this screenshot, my sticky header is z-index:1000

Spr123_0-1666035534241.png
Spr123_0-1666035534241.png1545×915 194 KB

Whereas the content is z-index:2.

Spr123_1-1666035655808.png
Spr123_1-1666035655808.png1543×912 168 KB

However the content somehow still covers the header. I tried playing with “! important” as well, no change whatsoever.

Why is the lower z-index value showing above the higher z-index value?

Can someone please tell me what I can do so that the sticky header remains as the very top layer?

I will be sure to give a thumbs up and high review to whoever can help me solve this quick and hopefully simple issue.

Many thanks!

2

Hello @Spr123 :waving_hand:

The reason is, the header and the content are not in the same layer. For example

Because the header and the content are in different layers, the content still takes precedence.

Hope that helps!

1 Like
3

Hi @Spr123 you can try this code

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets → theme.scss.css

.header-container {

z-index: 99 !important;

}

Hope you find my answer helpful!

Regards,

PageFly

1 Like
4

@Spr123
Hello,
I Have to Check Your Sticky Header. It’s Properly Working
if any doubt

.header-container .site-header {
z-index: 99999;
}

Add this css at the bottom Online Store ->Theme ->Edit code Assets → theme.scss.css

1 Like
5

Thank you so much for the quick and helpful replies everyone. Now it’s working as intended!