FROM CACHE - en_header
Promotion image

Re: custom liquid announcement bar cant make it sticky

Solved

custom liquid announcement bar cant make it sticky

daknbiz
Tourist
11 0 2
‎08-01-2024 08:29 PM

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!

Labels:
577 Views
0 Likes
Report
Accepted Solution (1)
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 11:14 PM

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

507 Views
0 Likes
Report
Replies 16 (16)

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 10:19 PM

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.

558 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 10:47 PM

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

556 Views
0 Likes
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 10:54 PM

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.

549 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 10:56 PM

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

546 Views
1 Like
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 11:02 PM

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.

519 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 11:05 PM

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

518 Views
0 Likes
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 11:10 PM

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.

513 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 11:12 PM

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

510 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 11:07 PM

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

517 Views
0 Likes
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 11:14 PM

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.

508 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-01-2024 11:15 PM

thank you so much it works!!!

506 Views
1 Like
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-01-2024 11:16 PM

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.

503 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-02-2024 03:15 AM

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?

480 Views
0 Likes
Report
In response to daknbiz

Dan-From-Ryviu
Shopify Partner
9539 1918 1955
‎08-02-2024 03:38 AM

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.

468 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-02-2024 04:02 AM

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.

465 Views
0 Likes
Report
In response to Dan-From-Ryviu

daknbiz
Tourist
11 0 2
‎08-02-2024 04:04 AM

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

465 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy