Make Announcement Bar Sticky - Warehouse Theme

Solved
Highlighted
Tourist
7 1 1

Hi, can someone please tell me the code to insert, to make my announcement bar sticky on both mobile and desktop?

URL https://renovation-warehouse.myshopify.com/

Password renoware

Thanks!

0 Likes
Highlighted
Explorer
119 19 28

This is an accepted solution.

follow this path:
Themes => edit code => asset => theme.scss.liquid
and try to add this code to bottom of the file theme.css.liquid

#shopify-section-announcement-bar {
	    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
	top: 39px;
}
My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageBuilder App.
shopify.expert.team@gmail.com
0 Likes
Highlighted
Tourist
7 1 1

Awesome that worked - but it needs padding for both mobile and desktop - see screenshot.

What/where should I add this?

Screen Shot 2020-09-08 at 7.49.54 PM.pngScreen Shot 2020-09-08 at 7.50.00 PM.png

0 Likes
Highlighted
Tourist
7 1 1

This is an accepted solution.

Managed to work it out.. see below code:

 

Thanks for your help!!

 

#shopify-section-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
  top: 30px;
}
0 Likes