Sticky Announcement Bar Sense Theme Shopify

JesperW
Tourist
7 0 1

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?

JesperW_0-1717070490880.png

 

Replies 16 (16)

nafeeur10
Shopify Partner
21 0 1

Which theme are you using?

Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1

Liqiud_xPert_SJ
Shopify Partner
978 117 151

@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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

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

Liqiud_xPert_SJ
Shopify Partner
978 117 151

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

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

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?

 

Liqiud_xPert_SJ
Shopify Partner
978 117 151

Ok let me share it

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Liqiud_xPert_SJ
Shopify Partner
978 117 151

It is because your top bar is not sticky on mobile 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

Okay! How can I change this?

 

Liqiud_xPert_SJ
Shopify Partner
978 117 151

@JesperW 

 

use below code for mobile

 

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

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

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?

 

Liqiud_xPert_SJ
Shopify Partner
978 117 151

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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

Yes I did!

Liqiud_xPert_SJ
Shopify Partner
978 117 151

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

}
- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
JesperW
Tourist
7 0 1

It still does not work unfortunately

Liqiud_xPert_SJ
Shopify Partner
978 117 151

It is strange for me

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Dirk
Shopify Staff
2340 253 518

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.

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog