Sticky mobile header creates a white gap when scrolling

Hi Tim,

As you can see, this section built by Elementor has a 20pxtop margin, you'll need to remove it first.
https://www.screencast.com/t/JamzDY41yL

Then add this CSS:

nav#site-navigation {
    position: relative;
}

Let me know :)

Thank you, that fixed the white gap, although there is still some "lag", like the picture jumping a bit as soon as the sticky header comes in.

Is there a way to fix that or will I have to live with it? :P

Hum... let's try to disable the sticky navigation for mobile, then use this CSS instead of the one I provided in my last reply:

nav#site-navigation {
    position: fixed;
    top: 0;
}

That seemed to fix it, thanks! :)

Err... it appears now that when viewing a single product, as soon as I start to scroll down, the product image jumps a bit again :(

EDIT: It started again after I enabled Top Bar Widget Area

Hi there,

i checked your other topic for the Site URL ( note: when a topic is resolved the forum auto deletes any private information ).

But i cannot see the jump on the single product?

It appears to happen on every page, not just on single product.

If you slowly, using a mobile phone scvroll down. Just as the sticky header appears (you can see it changes because the sticky header has a small grey border at the bottom) the whole page shifts downwards a bit.

By the way, I want to remove that grey border, so if that's what makes the page jump then maybe removing it will solve the problem? :)

You have the Sticky Navigation option still enabled in the Customizer which is not required when using the CSS method Ying provided - but see your other topic where i updated that CSS.

I have Sticky Navigation set to Desktop Only.

But if I set it to off, two things happen:

As soon as I start to scroll, the header gets cut off at the top

The header disappears behind the sticky add to cart that appears when scrolling down

Regarding that last thing, I actually want to disable the Sticky add-to-cart on desktop, but keep it on mobile. Is that possible? Found the code for that by searching :)

You can't use the CSS provided for sticking the nav as well as the Sticky Navigation option.
Considering your other topic regarding the top bar - you just need to disable the Sticky Navigation entirely and use the CS i provided.