How Can I Make Announcement Bar Sticky (above Header) on Impulse Theme

[bamboomike]

Hello - I manage ecomm for my family business www.simplyorganicbamboo.com.  I'd like to find a way to make the announcement bar sticky above the header so that it has the same behavior as the header where when you scroll down and start to scroll back up the header AND the announcement bar come back into view.  Any ideas what custom code I need to implement?

[Moeed]

Hey @bamboomike 

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 {
    padding-top: 55px !important;
}
.announcement-bar {
    position: fixed !important;
    z-index: 9999999999999999 !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

[bamboomike]

Hello - This is almost perfect.. but I noticed the announcement bar overlaps the navigation fly out on the left and the mini-cart on the right (most noticeable on mobile).  Is there a way for the navigation drop down and fly out cart to stay at the forefront layered on top of the announcement bar (announcement bar at the same layer as the header)?  Thanks!