Shopify themes, liquid, logos, and UX
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.
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!
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 🙂
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?
Hi,
I can make the announcement bar slide like this https://www.kontinue.dk/.
You can send me a personal message.
Thank You!
Hi Zeian - can you tell me how to do this please? Thanks!
Could you share here? As it might be beneficial forther users!! peae
´how did you do it?
Been trying with no success
Im trying to learn so I'll keep digging.
Thx anyways
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024