Remove sticky header only on product page for Vessel Theme

Store Design
1

Please, I would like to know how to reduce the sticky header on the product page only for my store. I activated the sticky header for the store, but I don’t want it on the product page only. It should scroll with the page.

Am using vessel theme.

Any help would be greatly appreciated. Thanks

2

@SageUmeh can you please share your website link? do you want to disable it on products page?

3

Hey @SageUmeh

Can you share your Store URL and Password if enabled?

Best,
Moeed

4

Add a “Custom liquid” to your product page template.
Paste this code:

<style>
  header {
    position: relative !important;
  }
</style>

Since this section belongs to the Product page template, the code will only apply on the product pages, making your header “normal” and not sticky :wink: .

The code should also work for all Horizon family themes, like Atelier, etc.

If not – share link to your store and preview password.

5

Hi @SageUmeh

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

6

It worked, but can you make apply only to mobile

7

Hello @SageUmeh ,

I hope you are well!

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
@media only screen and (max-width: 750px) {

header {
position: relative !important;
}
}

This will work only for mobile devices

8

Yep, this will be mobile-only:

<style>
  @media (max-width:750px) {
    header {
      position: relative !important;
    }
  }
</style>

Do not edit your theme code – “Custom liquid” section added to the Product page template will be more than enough and would not prevent your theme updates.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
9

Thanks a lot… it works great now

10

You can definitely make the sticky header only scroll normally on product pages while keeping it sticky elsewhere. Since you’re using the Vessel theme, the easiest way is with a small CSS tweak.

1. Identify the product page body class
Most Shopify themes add a unique class to the <body> tag for each page type. For product pages, it’s usually something like template-product.

2. Override the sticky header on product pages
Add this CSS to your theme (Online Store → Themes → Customize → Theme Settings → Custom CSS or in your theme.scss.liquid file):

.template-product .site-header {
  position: relative !important;  /* overrides sticky behavior */
}

3. Optional: Adjust spacing
If the sticky header added any extra spacing before, you might need to remove it:

.template-product .main-content {
  padding-top: 0 !important;
}

This will make your header scroll normally only on product pages while keeping it sticky on all other pages.