I am working on a Shopify store I have taken over in the middle of the project. I have added a custom announcement bar. However, I cannot get it to stick to the top when scrolling after trying the CSS position options. Every time I try the nav bar, it either scrolls over it or simply pushes the announcement bar out of view and leave the nav bar sticky.
Here is a live preview link. The custom announcement bar is in orange: https://crazy-bull-america.myshopify.com/?_ab=0&_fd=0&_sc=1
It's easy. You have to give the height of the announcement bar and make the navbar sticky at that height.
As your website, the announcement bar has a height of 41 pixels... You can also add a fixed height! So make the announcement bar sticky at 0 and the navbar sticky at 41 pixels.
This is the CSS for the announcement bar:
.section-announcement-bar {
position: sticky;
top: 0;
z-index: 20;
}
This for the navbar
.sticky-header .section-header {
position: sticky;
top: 41px;
width: 100%;
z-index: 20;
}