Sticky Header - Padding Loading Later

Will_Letts
Excursionist
14 1 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-shopif...

 

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. 

Replies 3 (3)

dmwwebartisan
Shopify Partner
12291 2547 3698
Will_Letts
Excursionist
14 1 1

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. 

Will_Letts
Excursionist
14 1 1

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.