Sticky Announcement Bar Sense Theme Shopify

[JesperW]

I am trying to make my announcement bar sticky. However if I apply the following code:
div#shopify-section-sections--21580379259203__announcement-bar {
position: sticky !important;
top: 0;
} 
It covers half of the header as well. 
Anyone knows what I can do in this instance?

[nafeeur10]

Which theme are you using?

[Liquid_xPert_SJ]

@JesperW 

please add a margin top with the same height of the top bar like if your top bar is 50px then you need to give top-margin of the logo section like, margin-top:50px;

it will be very easy for me to share an exact code for  you if you could provide me store url.

Thanks

[JesperW]

Thanks for your quick reply! My store url is: https://sensorpro.nl/

[Liquid_xPert_SJ]

please add below code into your css file where you already place the code.

Online Theme  > Edit Code > Assets  > base.css file.

.shopify-section-header-sticky.scrolled-past-header {
	top: 40px !important;
}

[JesperW]

That worked thanks! The only thing is that it is not working for mobile. Is there a way to fix this for mobile as well?

[Liquid_xPert_SJ]

Ok let me share it

[Liquid_xPert_SJ]

It is because your top bar is not sticky on mobile 

[JesperW]

Okay! How can I change this?

[Liquid_xPert_SJ]

@JesperW 

use below code for mobile

 @media screen and (max-width: 767px) {
.shopify-section-header-sticky.scrolled-past-header {
	top: 78px !important;
}
}

Thanks

[JesperW]

Hello!

Thanks again for your incredible help. I added this code, however, it works on my shopify theme, but not on my regular mobile phone. Is there something else I can try?

[Liquid_xPert_SJ]

Did you added this code i provided in the theme because i am not able to see that.

[JesperW]

Yes I did!

[Liquid_xPert_SJ]

replace the above code which i sent second time with this.

 @media screen and (max-width: 767px) {
#shopify-section-sections--21580379259203__announcement-bar {
	position: sticky !important;
	top: 0 !important;
}
.section-header.shopify-section-group-header-group {
	top: 78px !important;
}

}

[JesperW]

It still does not work unfortunately

[Liquid_xPert_SJ]

It is strange for me

[Dirk]

Hey, @JesperW 

I'm not formally trained in code to provide you with an exact solution to code a sticky announcement. However, I'm confident one of our Shopify experts would be able to accomplish this at a reasonable price.
 
Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

[Lydia224]

Hi, below what previous code should I insert your code to make the announcement bar sticky please?

I'm using 'Sense' theme.

Thanks

[Liquid_xPert_SJ]

Hi@Lydia224 

please use this code into your theme.liquid file paste it very before </body> thag

<style>
#shopify-section-announcement-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
</style>

[Lydia224]

It doesn't seem to be working for me, below is how I have inserted it...

[Liquid_xPert_SJ]

@Lydia224 

please share your store URL?

[Lydia224]

https://www.outyndrclub.com.au/

[Liquid_xPert_SJ]

@Lydia224 

please replace this code with previouse

<style>
.utility-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999;
	height: auto;
}
.header-wrapper {
	margin-top: 40px;
}
</style>

[Lydia224]

It's almost perfect... on mobile it looks great, however on desktop there is a small gap between announcement bar & header that shows the scrolling page. Do you know how to fix this? Thanks

[Liquid_xPert_SJ]

@Lydia224 

just reduce 1px from the 40px height.

[Lydia224]

Amazing. Thank you!! And whilst we're in conversation... Do you also know how to add payment provider icons to my announcement bar please? 

[Liquid_xPert_SJ]

@Lydia224 

yes this can be done with custom code.

[Liquid_xPert_SJ]

@Lydia224 

please mark this thread as solved so that we will continue.

[Lydia224]

Sorry but I am struggling to find how I mark as solved?

[Liquid_xPert_SJ]

@Lydia224  click on the three dots in this thread right side of this thread hopefully you will get that.

[Lydia224]

This is all I see...

[Liquid_xPert_SJ]

@Lydia224  ok no problem leave it.

[Lydia224]

Are you able to help me with the payment icons on announcement bar please. I have started on a new discussion.. https://community.shopify.com/c/shopify-discussions/add-payment-icons-to-announcement-bar/m-p/295511...