Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
does anybody know how to make the announcement Bar in Dawn sticky without overlapping with the logo at the top?
Thanks and best regards
Solved! Go to the solution
This is an accepted solution.
For the announcement bar add
position: fixed;
width: 100%;
left: 0;
top: 0;
and for your header element.
padding-top: 35px;
This is an accepted solution.
While you are inside the Theme Editor, click the three dots on top left of your screen, then select Edit Code, find the Assets folder, then base.css file, find the corresponding codes and edit them.
This is an accepted solution.
For the announcement bar add
position: fixed;
width: 100%;
left: 0;
top: 0;
and for your header element.
padding-top: 35px;
This is an accepted solution.
While you are inside the Theme Editor, click the three dots on top left of your screen, then select Edit Code, find the Assets folder, then base.css file, find the corresponding codes and edit them.
Hello, I tried your solution. When I add the custom code like this, everything looks good on web version.
But, when I open my website on my iphone, the sticky bar overlaps the header. Please suggest how to fix this.
Attach a link to your website for better understanding.
shaperini.com
I tried again and it worked!!! thank you so much 🙂
Glad it worked, good luck with your store.
Im still having trouble getting this done. I dont find the corresponding files. Could you take a look? I just want our Announcement bar to be sticky to the header when scrolling on all pages. Shop is
reiterwelt.eu
For the announcement bar add
.utility-bar__content{
position: fixed;
top: 50px;
width: 100%;
background: #fff;
}
.announcement-bar{
color: #000000;
background: #f5f3ed;
position: fixed;
top: 0px;
width: 100%;
}
.site-header-sticky .site-header {
position: sticky;
top: 100px !important;
}
Sorry guys, I tried but I couldn't make it. Ether the announcement bar disappears or ti's not sticky.
This is my code:
Thank you so much!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025