Sticky Header Getting Stuck in Transparent Header

[Aaron-Mihell]

Hi,

I have an issue with my header, where if you scroll down and then scroll back to the top, a part of the solid header gets stuck.

My header is designed so that it is transparent at the top of the page and solid when you scroll.

You can also see in the other screenshots that parts of the white from the products below are also getting stuck for some reason.

if anyone could help in getting this resolved it would be greatly apreciated.

Store link: solaque.co.uk

Thanks,

Aaron

[TheScriptFlow_1]

Hey @Aaron-Mihell

Thanks for posting this to the Shopify Community.

The issue you’re describing — where the solid header background gets “stuck” or elements from the section below appear — is usually caused by a sticky header CSS or JavaScript conflict.

How you can fix it:

1. Go to Online Store → Themes → Edit Code → Assets → base.css (or theme.css)

2. Add this code at the bottom:

   .header-wrapper {
     backface-visibility: hidden;
     transform: translateZ(0);
     will-change: transform;
   }
   .header-sticky {
     z-index: 9999;
     background-color: #fff !important;
   }
   
   

3. If your theme uses JavaScript for the header transition, ensure that the class toggle (transparent → solid) is applied only after scrolling begins — not when at the very top.

This usually resolves the “ghost” white area or header background glitch that happens when scrolling back to the top.

Waiting to hear back from you.
If this was helpful, don’t forget to like it and mark it as a solution.

Thanks

[Aaron-Mihell]

Works Great! Thank you for your help.

[TheScriptFlow_1]

My pleasure If you need another help then let me know.

[Aaron-Mihell]

Hi @TheScriptFlow_1

I have just discovered a problem. My menu is no longer opening properly on either desktop or mobile.

Do you know how to fix this?

Thanks,

Aaron

[devcoders]

Hi @Aaron-Mihell

I visited your site, and it seems that the issue has been resolved?

Best regards,
Devcoder