Overlapping issue with AI-generated section

Store Design
,
1

Hi, I’m using the Shopify Horizon theme and using a custom sticky header (AI-generated section, not the native theme header). I’m running into a stacking issue that I can’t resolve.

When I scroll, page content e(product images, text blocks, sections) are above the sticky header. Instead of staying behind the header, everything visually overlaps on top of it.

If anyone can help with this I’d really appreciate guidance! Thanks.

2

It’s an AI generated section, how we supposed to diagnose it without slightest idea what it does?

No URL – no help :slight_smile:

3

dropped you a message!

4

Hey @FLMBZ Welcome to Shopify Community can you please share the Website URL

5

On your sticky header section in “Theme Edit” go to “Custom CSS” and paste this:

{ z-index: 3; }

The code will apply z-index to entire section.

It’s invalid code outside sections “Custom CSS”, but Shopify will add proper selector automatically if used in sections Custom CSS.

Otherwise, you can use code like this in Theme Settings-> Custom CSS or in your stylesheet:

.shopify-section:has([class^="ai-sticky-header"]) {
  z-index:3;
}

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it
6

This worked! Thank you for your help!