Announcment banner is not sticky with the header Dawn

MS2333 · ‎01-14-2024

Hello,

I need help with the announcment banner, If I scroll down everything is perfect If I am at the top of the site the Announcment banner is not sticky with the header and I get a white space like in the screenshot

Could you please help me ?

Dan-From-Ryviu · ‎01-15-2024

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code under <head> element

<style>
@media (min-width: 1000px) {
body .shopify-section-header-sticky { top: 40px !important; }
}
.shopify-section-header-sticky { top: 36px !important; }
header { padding-top: 0px !important; }
</style>

- Helpful? Like and Accept solution! Or Support me: 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

Dan-From-Ryviu · ‎01-14-2024

Hi @MS2333

Please share your store URL

- Helpful? Like and Accept solution! Or Support me: 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.

PageFly-Henry · ‎01-15-2024

Hi @MS2333

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.announcement-bar.color-background-1.gradient {

position: !important;

z-index: 1;

top: 0;

}

In case the above code does not work, please share with me the editor url and password page. So I can examine this issue more closely.

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

MS2333 · ‎01-15-2024

Hey,

unfortunately that did not work, here is the link to my store

www.45keys.com

Dan-From-Ryviu · ‎01-15-2024

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code under <head> element

<style>
@media (min-width: 1000px) {
body .shopify-section-header-sticky { top: 40px !important; }
}
.shopify-section-header-sticky { top: 36px !important; }
header { padding-top: 0px !important; }
</style>

- Helpful? Like and Accept solution! Or Support me: 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.

MS2333 · ‎01-15-2024

Thank you this has worked amazing !!!

Other question can you also help me here ?

https://community.shopify.com/c/shopify-design/variants-selector-in-one-row-dawn/td-p/2396514

Announcment banner is not sticky with the header Dawn

Announcment banner is not sticky with the header Dawn

Community Blog Articles