Announcement bar sticky

[Quincko]

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

[Columbus_Themes · Accepted solution]

For the announcement bar add 

position: fixed;

width: 100%;

left: 0;

top: 0;

and for your header element.

padding-top:  35px; 

[Columbus_Themes · Accepted solution]

For the announcement bar add 

position: fixed;

width: 100%;

left: 0;

top: 0;

and for your header element.

padding-top:  35px; 

[Quincko]

How and where should i insert this code? @Columbus_Themes 

[Columbus_Themes · 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.

[olinka012]

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.

[Columbus_Themes]

Attach a link to your website for better understanding.

[olinka012]

shaperini.com

[olinka012]

I tried again and it worked!!! thank you so much 🙂

[Columbus_Themes]

Glad it worked, good luck with your store.

[FL28]

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

[sachiyablavant]

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

[vagabund]

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!