Why is padding in my sticky header loading last and how can I fix it?

Store Design
1

Hi,

My store www.snack-box.co.uk is using a sticky header which adapts really well to the size of the header, regardless of the device or screen size using code from a tutorial I found here:

https://ecomexperts.io/blogs/liquid-tutorial-shopify/free-diy-code-trick-for-a-sticky-menu-on-shopify-%F0%9F%92%A1-codelab-by-ecomexperts-io

It looks great (as you can hopefully see), but the ‘padding’ which prevents the header from covering the page is the last thing to load, meaning the page loads fully before it jumps to the correct alignment. Can anybody help me with a line of code to make this padding the first thing to load?

Unfortunately it’s not as simple as just setting a default padding amount because the padding needs to adapt if I have an announcement bar or not, or whether the screen is in landscape or not.

Store URL www.snack-box.co.uk

Thanks in advance,

Will.

2

@Will_Letts

Please check this articale https://community.shopify.com/topic/518018

3

Fantastic. Thanks for the helpful share. I will try implementing this code instead of what I already have in place and see if it helps.

4

Hi @dmwwebartisan

Thank you for sharing the helpful article. The code in the article seems to be exactly what I have already implemented. The problem is the site ‘jumps’ while the top padding is loading. Are you able to advise on how I could fix this?

You can see what I mean here: www.snack-box.co.uk

Thanks,

Will.