Solved

Make Announcement Bar Sticky - Warehouse Theme

goldtreedesign
Excursionist
30 2 2

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!

Accepted Solutions (3)

Michael_Pink
Shopify Partner
446 77 107

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: PageFly PageBuilder App.

shopify.expert.team@gmail.com

View solution in original post

goldtreedesign
Excursionist
30 2 2

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

View solution in original post

Michael_Pink
Shopify Partner
446 77 107

This is an accepted solution.

Hi @goldtreedesign 
To fix the problem on mobile like you want.
You can replace the old code by this:

@media(min-width: 650px){
#shopify-section-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
  top: 30px;
}
}
My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com

View solution in original post

Replies 10 (10)

Michael_Pink
Shopify Partner
446 77 107

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: PageFly PageBuilder App.

shopify.expert.team@gmail.com
goldtreedesign
Excursionist
30 2 2

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

goldtreedesign
Excursionist
30 2 2

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;
}
goldtreedesign
Excursionist
30 2 2

Hiya, are you able to tell me how I can remove this rule from mobile devices? I don't want it to be sticky on mobile, because it hides the search bar 🙂

Michael_Pink
Shopify Partner
446 77 107

This is an accepted solution.

Hi @goldtreedesign 
To fix the problem on mobile like you want.
You can replace the old code by this:

@media(min-width: 650px){
#shopify-section-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
  top: 30px;
}
}
My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
goldtreedesign
Excursionist
30 2 2

Thank you!!!

AliGuessoum
Visitor
1 0 0

Hello, I am with the theme motion, the announcement bar does not stay fixed neither on mobile nor on computerCapture d’écran 2021-04-19 à 19.28.01.png

Murillas
Shopify Partner
1 0 0

Hi!

I applied this code and it works great in the desktop version, but in the mobile version it hides.

 

Thank you in advance for your valuable help.

lucherio007
Visitor
1 0 0

Hi Michael, I have the prestige theme and I would like to have a sticky announcement bar too. I've tried to do what you said but I came up like this (see the picture): the background color isn't working anymore. Please, can you help me fixing this? Thank you.

WhatsApp Image 2021-06-10 at 18.21.33.jpeg

Michael_Pink
Shopify Partner
446 77 107

@lucherio007you need share the page url, then I can check and give you the code to fix.

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com