Re: How to make header sticky in Refresh theme

Solved

How to make header sticky in Refresh theme

Snow_Wolf
Explorer
72 0 15

Hi all,
I have tried every solution out there (both in the Shopify Community and Youtube) and nothing seems to work. The Refresh theme seems more recent than others and therefore may need a specialized solution ?

Editing the base.cc (which replaces the theme.scss.liquid from my understanding) as well as the theme-editor.js (which replaces the theme.js from my understanding) with the usual pieces of code found in various posts does not change the behavior of the header.

Your help would be much appreciated!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10965 2150 2289

This is an accepted solution.

Go to your Shopify admin > Online store > Themes > Live theme > Actions > Edit code > Assets > base.css and add this code at the bottom of the file 

.shopify-section-header-hidden {
transform: translateY(0%) !important;
}

 

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10965 2150 2289

Could you provide your store URL?

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snow_Wolf
Explorer
72 0 15

Thanks!

Dan-From-Ryviu
Shopify Partner
10965 2150 2289

This is an accepted solution.

Go to your Shopify admin > Online store > Themes > Live theme > Actions > Edit code > Assets > base.css and add this code at the bottom of the file 

.shopify-section-header-hidden {
transform: translateY(0%) !important;
}

 

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snow_Wolf
Explorer
72 0 15

Thank you so much for your help!!!

That was incredibly easy 😅. Hopefully this thread will help others as well.

Tiagiinho
Explorer
47 3 6

Hello,

 

I have exactly the same problem, tried everything but nothing seems to work out.

I also added your code but didn't fix it.

Could you have a look please ?

Website : https://www.spoown.com

I'm using gempages, if it could be a problem with the header..

 

Thx

Tiagiinho
Explorer
47 3 6
Dan-From-Ryviu
Shopify Partner
10965 2150 2289

Hi @Tiagiinho.,

 

Please try to use this code 

.shopify-section-header-hidden {
    transform: translateY(0%) !important;
}
.shopify-section-header-sticky {
    position: fixed !important;
    width: 100%;
}

 

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Tiagiinho
Explorer
47 3 6

Thanks @Dan-From-Ryviu .

It works but a small problem remains. As you can see when you scroll down the announcement bar and header disappear to bump just after and get sticky. It creates a short animation that is not really smooth.

 

Edit : What should I do if i want the announcement bar sticky as well ? So the all header will be smoother. Thx