Guys believe me, i´ve tried EVERY code suggested in the infinite posts asking for this same issue BUT all of them has a gap between the header and the announcement bar when scrolling. Can anyone help me to make both smoothly sticky when scrolling? I,d really appreciate it.
I already have the header sticky.
Website is www.castabrava.cl
HI @cbswco
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can try with this code.
Follow this:
Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file
sticky-header#Top_Header {
position: fixed;
top: 37px;
z-index: 1;
width: 100%;
}
.announcement-bar {
position: fixed;
z-index: 1;
width: 100%;
top: 0;
}
Hope that my solution works for you.
Best regards,
Richard | PageFly
Hi @cbswco .
This is PageFly - Advanced Page Builder.
You can go to Online store => themes => actions => edit code and add this code on file base.css
div#shopify-section-announcement-bar{
position: fixed;
top: 0;
width: 100%;
}
Hope this answer helps.
Best Regards,
PageFly
Incredible! Thank you very much Richard!
You are welcome @cbswco 
Yes! This worked - thank you!
Hey ! this worked very nice ! But would you help me even mroe ?
How can it be to just only be sticky in the Home?