Shopify themes, liquid, logos, and UX
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 ?
Solved! Go to the solution
This is an accepted solution.
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>
- Solved it? Hit Like and Accept solution!
- 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.
Hi @MS2333
Please share your store URL
- Solved it? Hit Like and Accept solution!
- 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.
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.
This is an accepted solution.
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>
- Solved it? Hit Like and Accept solution!
- 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.
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025