Re: custom liquid announcement bar cant make it sticky

Solved

custom liquid announcement bar cant make it sticky

daknbiz
Tourist
11 0 2

can't seem to make it sticky, tried messing around with code in the base.css and no luck. Any help would really be appreciated!

 

I am using the Shrine Theme!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
9534 1916 1950

This is an accepted solution.

Maybe too much code. Please add this code to theme.liquid file, after <head> and save file

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 16 (16)

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Hi @daknbiz 

Please share the link to your store so I can check and give you the code

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

The custom liquid announcement bar at the top with the countdown timer, cant seem to make it sticky.

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Please add this code at the bottom of your base.css file 

.announcement-bar-section { top: 0; position: sticky; }
body .shopify-section-header-sticky { top: 38px }

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

Could you check it again, I added the code at the bottom of base.css on a new line. Still not sticky 😞

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Maybe you caused something not right on your base.css file, please try to move that code to Custom CSS in Online Store > Themes > Customize > Theme settings and check again.

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

It worked for one of the announcement bars the free shipping one. But not for the countdown at the top.

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Please update the code

.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

perfect!! I just now can't seem to get it to save

daknbiz
Tourist
11 0 2

Also, tried saving but it says "Online store editor cannot be published"

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

This is an accepted solution.

Maybe too much code. Please add this code to theme.liquid file, after <head> and save file

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

thank you so much it works!!!

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Very welcome! 

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

Hey Dan, 

 

I ran into another issue. On Chrome and every other browser, it works perfectly. However, on Safari on my Mac there's a slight gap between the countdown banner and the announcement bar. Any way to fix this or could it just be a Safari issue?

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

Please update the code 

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 42px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

daknbiz
Tourist
11 0 2

okay so now on safari and every other browser there's no gap between the countdown banner and announcement bar. However, now there's a gap between the announcement bar and header.

daknbiz
Tourist
11 0 2

thank you! I figured out how to fix it on my end 🙂