Dawn Theme Announcement Bar Sticky on Mobile! Please Help!

[colb_32]

I’m having issues making my announcement bar sticky on mobile!

The code below is successfully sticky on desktop, but not mobile.

I’ve tried multiple forums, videos, and codes, but no luck.

See script below, would love some help!

.announcement-bar-section {
position: sticky;
top: 0;
z-index: 20;
}
.section-header {
position: sticky;
top: 37px;
width: 100%;
z-index: 20;
}

.shopify-section-header-sticky{
box-shadow:0px 5px 5px rgba(0,0,0,.5);
}
@media screen and (max-width: 640px) {
.announcement-bar-section {
position: sticky !important;
top: 0 !important;
}

[Moeed]

Hey @colb_32

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[colb_32]

Appreciate the quick response! www.shophuntlocal.com

[Moeed]

Hey @colb_32

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[colb_32]

Thank you so much! That works, but my announcement bar now overlaps my menu? Any ideas?

[Dan-From-Ryviu]

Add this addition code to solve this issue

[colb_32]

Perfect! One last question! I’d like my announcement bar to remain sticky at all times but have my menu/header only sticky when scrolling up. I’ve updated this setting on the Header setting for Sticky “On scroll up”.

The setting looks works for a second but then the entire header/menu appears again, assuming it because of a previous code?

[blanc2]

this work too…

1. Go to Online Store

2. Edit Code

3. Find " base.css "

4. Add the following code at the bottom of the file after watching this youtube video

@media screen and (max-width: 640px) {
.announcement-bar-section {
position: sticky !important;
top: 0 !important;
}

[Dan-From-Ryviu]

You can update the code to this

[staceyshevlin]

Hi did you find an answer for this? Trying to make my announcement bar on mobile sticky with no luck.

[Dan-From-Ryviu]

Please share the link to your store.