Sticky Header issue

Technical Q&A
1

Hi, I have a store where in the Product information section is overlapping with the header of my store when scrolling down. I was able to determine that the code would be on the screenshot below: Please help https://shopify.click/18514

2

Hey there :waving_hand:

That usually happens when the product info container or header has a higher z-index or fixed position without proper spacing.

You can try checking your theme’s CSS file and look for something like:

.product__info { z-index: 1; }

.header-wrapper { position: fixed; z-index: 10; }

Then, increase the top margin or padding for the product section - for example:

.product__info { margin-top: 100px; }

That should stop the overlap when scrolling.

If it’s a custom theme or has extra scripts, you might want to inspect the header section too -sometimes the sticky header code causes the issue.