- This topic has 10 replies, 3 voices, and was last updated 4 years, 5 months ago by
.
-
Posts
-
I am using navigation as header and have activated sticky navigation to make the header sticky when scrolling.
On my main page, on mobile, when starting to scroll down, there is a white gap appearing between the header and the image just as the sticky header “activates” if you know what I mean.
Site URL attached so you can see for yourself on a mobile phone.
Any way to fix this?
Customer Support
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/JamzDY41yLThen 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? 😛
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
Customer Support
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 downRegarding 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.
- You must be logged in to reply to this topic.
