How can I make the announcement bar sticky on mobile with Dawn theme?

reallycoollivin
Tourist
8 0 1

Help! I need the announcement bar sticky on desktop and mobile, but can only seem to get it to work on desktop using the forums here. Can anyone help?

Replies 11 (11)
reallycoollivin
Tourist
8 0 1

There is not a 'display' tab nor anything that says 'responsive' in the announcement bar settings.

colb_32
New Member
6 0 0

Looks like you got this resolved! I'm having the same issue, how did you resolve?

Abdosamer
Shopify Partner
821 146 165

Hi @reallycoollivin , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
reallycoollivin
Tourist
8 0 1
Abdosamer
Shopify Partner
821 146 165

Go to base.css and add the following snippet :

@media screen and (max-width: 640px) {
      .announcement-bar-section {
       position: sticky;
       top: 0;
}
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
reallycoollivin
Tourist
8 0 1

Just tried and it does not work. I left it published so you can check.

Abdosamer
Shopify Partner
821 146 165

It seems that other code overwriting my code , add the following snippet :

@media screen and (max-width: 640px) {
      .announcement-bar-section {
       position: sticky !important;
       top: 0 !important;
}
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
reallycoollivin
Tourist
8 0 1

Doesn't work

Abdosamer
Shopify Partner
821 146 165

Try this :

.announcement-bar-section {
    position: sticky !important;
    top: 0 !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
reallycoollivin
Tourist
8 0 1

exactly what I had before, sticky on desktop, but not mobile.

NijaMama
Visitor
2 0 0

Did you ever get an answer to this?