Liquid, JavaScript, themes, sales channels
Hi, I have been searching for guides on how to make just the announcement bar sticky, however, I have not been able to find a solution that does not overlap the header. Right now, I am using the following code, however, both the announcement bar and the header are sticky:
#shopify-section-header {
position: fixed;
z-index: 9;
width: 100%;
}
#PageContainer {
padding-top: 120px;
}
I also tried this code, however, it overlaps the header:
.announcement-bar{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
How could I make just the announcement bar sticky, without disturbing the header. I'm guessing this would be done by having the announcement bar go behind the header when scrolling, without disturbing it. Thank you so much.
Solved! Go to the solution
This is an accepted solution.
Hi @SethN1
Paste these css at the bottom of your theme.css file. please like and accept solution if its work for you.
uvteeth.com
This is an accepted solution.
Hi @SethN1
Paste these css at the bottom of your theme.css file. please like and accept solution if its work for you.
It worked, thank you!
Hi, thank you for your help and I just noticed a problem. On mobile, when you use the menu, the bottom of it gets cut off. How could I fix this?
Hi @SethN1
Please copy and paste these css at the bottom of your css file.
@media(max-width: 749px){
#PageContainer {
padding-top: 120px;
}
}
That fixed the visual problem, however, for some reason, the bottom button in the menu is not clickable, even when you go into the learn category, the button on the bottom of the list becomes unclickable.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024