Sticky Menu not sticky on iPhone, and disable jumping animation

[EarlySigns]

Hi there, I was wondering if you could help me?

I have made the menu sticky on all screen sizes, but on mobile this seems to be misbehaving.

Attached is a video that shows the issue;

1.) In Chrome on an iPhone, when scrolling down the very top white part of the sticky header disappears (but does not happen when scrolling back up). The sticky header is made from 3 parts and all are sticky. The top part does not disappear in Safari.

2.) In all browsers, when scrolling back to the top, the 3 sections I have made sticky seem to ‘jump’ around. I would like to know how to disable this ‘animation’ and make them permanently fixed/sticky.

Many thanks for your help in advance.

[prakash_s]

Hello @EarlySigns,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[EarlySigns]

Hi there, I have left a secure note, many thanks for your reply in advance.

[prakash_s]

Hello @EarlySigns,

It looks like you’re using multiple Header Bars, each set to sticky, which can cause a jumping effect on some devices when they all trigger at once. Use a single DIV element instead. Add all your header elements inside this DIV based on your design, then set the DIV’s Position to fixed for sticky behavior. This creates a unified sticky header without conflicts.

Hope it helps
Thanks

[EarlySigns]

Hi there, thanks for the reply. Using DIVs sounds promising - how would I go about doing this, instead of using 3 header bars? Is there a resource on this forum/on your website where I can learn how to do this please? Many thanks.

[ruenel]

Hello @EarlySigns,

You can check out this YouTube tutorial to know more about how you can set up Sticky Containers for your website.
https://www.youtube.com/watch?v=_4W1Sw535aU

Cheers.

[EarlySigns]

Hi there, it’s OK I have figured it out. I have now made a new header that is one Bar, which includes all 3 rows.

However, I still have a little ‘jump’ when the user scrolls down initially. I have even changed the shrink size to ‘0’ with no joy. Is there a way to disable the little glitch when you scroll down, so it’s true sticky?

Many thanks

[prakash_s]

Hello @EarlySigns,

I would suggest you please go to the Header bar->Sticky-> Enable the “Starts Fixed” option and disable the Scroll Offset and Slide Enabled options. Please have a look at the given screenshot below.

Hope it helps
Thanks