Re: Announcement Bar Sticky

Solved

Announcement bar sticky

Quincko
Tourist
17 0 1

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

Accepted Solutions (2)

Columbus_Themes
Shopify Partner
121 9 16

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

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!

View solution in original post

Columbus_Themes
Shopify Partner
121 9 16

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.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!

View solution in original post

Replies 11 (11)

Columbus_Themes
Shopify Partner
121 9 16

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

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
Quincko
Tourist
17 0 1

How and where should i insert this code? @Columbus_Themes 

Columbus_Themes
Shopify Partner
121 9 16

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.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
olinka012
Tourist
15 0 1

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.

IMG_9215.PNG

Columbus_Themes
Shopify Partner
121 9 16

Attach a link to your website for better understanding.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
olinka012
Tourist
15 0 1

shaperini.com

olinka012
Tourist
15 0 1

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

Columbus_Themes
Shopify Partner
121 9 16

Glad it worked, good luck with your store.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
FL28
Tourist
10 0 1

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
Shopify Partner
29 0 3

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
Excursionist
25 2 0

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!