Solved

Announcment banner is not sticky with the header Dawn

MS2333
New Member
6 0 0

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 ?

 

MS2333_0-1705281275543.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7059 1334 1355

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>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
7059 1334 1355

Hi @MS2333 

Please share your store URL

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Henry
Astronaut
821 232 202

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
New Member
6 0 0

Hey,

 

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

www.45keys.com

Dan-From-Ryviu
Shopify Partner
7059 1334 1355

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>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

MS2333
New Member
6 0 0

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