How to create a moving announcement bar on Dawn Theme 4.0?

[studiohafnia]

Hi

We would like to have a moving announcement bar on our Shop www.studiohafnia.dk in the top of the page. We already have an announcement bar now but we would like it to move. Do anyone of you know how to do this? Maybe by coding the theme or with a free app? Our theme is Dawn, version 4.0. Thank you so much in advance.

[AvadaCommerce]

Hi @studiohafnia 

Do you want to have the announcement bar sticky on the top when scrolling? So please try going to your Themes > Edit code > Assets > Open base.css and add the following code to the bottom of the file. 

/* section-header */
#shopify-section-header{
  z-index: 3;
  top: 36px;
}

.shopify-section-header-sticky, #shopify-section-announcement-bar {
  position: sticky;
  top: 0;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

[studiohafnia]

Hi

Thank you SO much for your answer. We would like to have it like on this webpage here: https://www.kontinue.dk/?gclid=Cj0KCQjw6J-SBhCrARIsAH0yMZj1ngljlXDbKg67b4t2EduBNVek6-M6h8qGDTyN7xX6v...

Would you still recommend us to try with the solution above then? It should stick to all pages yes 🙂

[AvadaCommerce]

Hi @studiohafnia 

My solution keeps your announcement bar sticky on the top when scrolling down. 

Do you want to keep the entire header section (announcement bar, logo, and menu) sticky?

[Muhammad_Ali_S]

@studiohafnia,

Hi, 
I can make the announcement bar slide like this https://www.kontinue.dk/.
You can send me a personal message.

Thank You! 

[poweoh]

Hi Zeian - can you tell me how to do this please? Thanks!

[Djalil]

Could you share here? As it might be beneficial forther users!! peae

[Djalil]

´how did you do it?

Been trying with no success

[poweoh]

Hi unfortunately I didn't manage to do on my own.

I paid a freelancer - happy to share contact if you require?

[Djalil]

Im trying to learn so I'll keep digging.

Thx anyways