Dawn Theme Announcement Bar Sticky on Mobile! Please Help!

Technical Q&A

Topic summary

A user seeks help making the Dawn theme announcement bar sticky on mobile devices. Their CSS code works on desktop but fails on mobile despite using !important declarations and media queries.

Initial Solution:

  • Add JavaScript code to theme.liquid file above the </body> tag
  • This successfully makes the announcement bar sticky on mobile

Follow-up Issue:
The sticky announcement bar now overlaps the menu/header. An additional CSS code snippet is provided to resolve the overlap.

Advanced Request:
The user wants the announcement bar to remain sticky at all times, but the header/menu should only be sticky when scrolling up (using Dawn’s “On scroll up” setting). Updated JavaScript code is provided to achieve this behavior.

Alternative Approach:
Another user suggests adding CSS directly to base.css file with the same media query code, referencing a YouTube tutorial.

The thread remains active with another user seeking similar help for their mobile announcement bar.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

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! :slightly_smiling_face:

.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;
}

2

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

3

Appreciate the quick response! www.shophuntlocal.com

4

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:

Moeed_0-1705684697136.png
Moeed_0-1705684697136.png366×601 100 KB

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

Best Regards,
Moeed

5

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

6

Add this addition code to solve this issue
1 Like
7

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?

8

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;
}

Screenshot 2024-07-02 193045.png
Screenshot 2024-07-02 193045.png1569×671 62 KB

9

You can update the code to this
10

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

11

Please share the link to your store.