How can I make the Header Policies Block sticky on both mobile and desktop?

Technical Q&A
1

Hello!

I hope the weekend is treating you kindly.

I want to make my “Header Policies Block” sticky/fixed for scroll on both mobile and desktop. My header is fixed as you scroll, but I want the Policies Block to be fixed as well since it identifies key aspects of the product and showcases free shipping.

Here’s the site: www.shredsurfcompany.com

Thanks so much for the help!

shredsurfco_0-1665883883374.png
shredsurfco_0-1665883883374.png1842×607 213 KB

2

Hello @shredsurfco

If you added this code yourself simply test putting inside the headers #sticky-wrapper .wrapper-header-bt div instead. Or I think the relevant .wrapper-header-bt that javascript applies that #sticky-wrapper divs around around the policy bar.

Or you need to hook into the javascript doing the sticky header and trigger a fixed position and vertical offset(so it’s under the header).

Or depending on how smart the javascript is putting the data attribute “data-sticky-pc” on the policy bars div.

If you need this advanced customization done, you can contact me with info in my signature, please provide context(post url, store name, theme name, issue details).