Why is my dawn theme's sticky header not working properly on the product page?

[shopafterhour]

Hello,

I'm currently using a dawn theme

I had a sticky header overlapping with #MainContent on product page.

But at some point it started not to work...

I'm not sure what is triggering the sticky header to not work.

I'm trying to apply this same option on my homepage as well.

Can anyone please help?

This is the code I have in Theme.liquid before </body>

screenshot below for reference,

<style>
{%if template contains 'product'%}
.header-wrapper.gradient{
background:transparent !important;
}
.scrolled-past-header .header-wrapper.gradient{
background:#ffffff!important;
}
#MainContent{
margin-top:-60px!important;
}
{%endif%}
</style>

 

[Made4uo-Ribe]

Hi @shopafterhour 

Please share your website to provide your with appropriate code

[shopafterhour]

Hello,

website : https://afterhour-6053.myshopify.com/

Sorry forgot to add my link!

[Made4uo-Ribe]

Hi @shopafterhour 

Thank you but I do not see the sticky header on the link provided. If this is an unpublished theme, please click preview and provide us the preview link

[shopafterhour]

Please see below 2 images

Sticky header is enabled in the theme editor and I also have below code on my base.css

none of them work 😭

.shopify-section-header-sticky {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

}