The sticky header is not working on the product page

[Eric_Gift]

Hello,

I’m currently using the Shopify Honey theme and have enabled the sticky header feature.

However, it seems that the sticky header is not displaying on the product page.

Could anyone provide guidance on how to ensure that the sticky header appears consistently across all pages? Your help would be greatly appreciated.

My store: https://cloudgifts.com.tw/
Product page: https://cloudgifts.com.tw/collections/all/products/silicone-lunch-box

[BSSCommerce-HDL]

Hi @Eric_Gift, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
sticky-header.header-wrapper.header-wrapper--uppercase {
    background-color: #ca9f93;
    color: #ffffff;
    position: fixed !important;
    top: 83px;
    left: 0;
    width: 100vw;
    transition: 0.2s;
}

.header-wrapper:before {
    background-color: transparent !important;
}

.shopify-section.shopify-section-group-header-group.shopify-section-header.scrolled-past-header sticky-header.header-wrapper {
    top: 0 !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Eric_Gift]

After adding this code, the header becomes a fixed sticky header, but on the product page, it turns into a scrolling sticky header.😢

[BSSCommerce-HDL · Accepted solution]

Pls try again with this code: 

<style>
sticky-header.header-wrapper.header-wrapper--uppercase {
    background-color: #ca9f93;
    color: #ffffff;
    position: fixed;
    top: 83px;
    left: 0;
    width: 100vw;
    transition: 0.2s;
}

.header-wrapper:before {
    background-color: transparent !important;
}

.shopify-section.shopify-section-group-header-group.shopify-section-header.scrolled-past-header sticky-header.header-wrapper {
    top: 0 !important;
}

.shopify-section.shopify-section-group-header-group.shopify-section-header.scrolled-past-header.shopify-section-header-hidden {
   transform: unset !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Eric_Gift]

Thank you very much!

[BSSCommerce-HDL]

@Eric_Gift, No problem. Have a good day 😍