Sticky Header - Padding Loading Later

Will_Letts
Excursionist
13 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. 

0 Likes
dmwwebartisan
Shopify Partner
8983 2088 2849

@Will_Letts 

Please check this articale https://community.shopify.com/c/shopify-design/sticky-fixed-header-and-navigation-for-debut-theme/td...

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Will_Letts
Excursionist
13 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. 

0 Likes
Will_Letts
Excursionist
13 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. 

0 Likes