Shopify themes, liquid, logos, and UX
Hi there,
So basically i have a announcement bar at the top of my page, and i would like to make this sticky, exactly like my header is currently, it sticks when you scroll down. would someone be able to help me with this?
Solved! Go to the solution
This is an accepted solution.
Hey @Mani8
Remove the previous code and add this new code.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
header#SiteHeader {
margin-top: 38px;
}
.announcement {
position: fixed;
top: 0 !important;
z-index: 999 !important;
overflow: visible !important;
width: 100% !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey @Mani8
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
messaged you
Hey @Mani8
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.announcement {
position: sticky !important;
top: 0 !important;
z-index: 9999999 !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thanks for the quick response.
Its only sticky till the first element. Then scrolls over.
This is an accepted solution.
Hey @Mani8
Remove the previous code and add this new code.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
header#SiteHeader {
margin-top: 38px;
}
.announcement {
position: fixed;
top: 0 !important;
z-index: 999 !important;
overflow: visible !important;
width: 100% !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Let me know next steps.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025