Sticky header bug

Store Design

Topic summary

A user reports their sticky header isn’t functioning despite being enabled in settings. The same issue affects product information that should remain fixed while scrolling.

Root Cause Identified:
Another user analyzed the CSS and found conflicting z-index values. The product page CSS (section-main-product.css) contains z-index: 3 !important; on .product__column-sticky elements, placing them at the same stacking level as the sticky header and causing them to cover it.

Proposed Solutions:

  • Increase the header’s z-index value to be higher than 3
  • Remove the z-index property from the product section elements (likely unnecessary based on the !important flags suggesting non-original theme code)

The issue appears to be a CSS layering conflict rather than a functional problem with the sticky header feature itself.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello. I need help with my website. I can’t get the header to stay sticky (although in the options I already have it selected so that it stays sticky)
I suppose something is blocking that function since also within the products I want the information to remain fixed when scrolling and I can’t do it either.

What could it be?

website: lukeando.uy

5
6

On a product page you have this in section-main-product.css:

@media screen and (min-width: 750px) {
  .product__column-sticky {
    display: block !important;
    position: sticky !important;
    top: 3rem !important;
    z-index: 3 !important;
    align-self: flex-start;
  }

z-index: 3 !important; makes your product sections on the same “level” as stick header and they cover the header.

Judging by the !importants it’s not a part of original theme code. Do not think assigning z-index there is needed.

Either make your header z-index higher, or remove this z-index from the product section elements.