Pro, Header, jump after scroll

Support
#1

Hey guys,
how I can get rid off this annoying “jump” after scroll?
The header height is 100px and not “auto”.

Best,
Robert

#2

Hi Robert,

Thanks for writing in!

Is your header positioned as relative or absolute? Please keep in mind that the bar needs to touch the top of the page first before it can become a fixed bar in your header. Would you mind providing us access to your site so that we can check your header settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#3

The header is positioned as relative.
As you can see in the video in my secure note happens this jumps not regularly.

#4

Hello @RSMG,

When you enable the Sticky option in the bar settings, please set the trigger to 0.

Hope this helps. Please let us know how it goes.

#5

I always set this to 0.

#6

Hey Robert,

Please give us the password to view your site (see the secure note) so we could replicate the setup and see if the issue will happen in our test site also.

Thanks.

#7

Thank you, see you secure note.

#8

Hi @RSMG,

Thank you for the credentials but I can’t replicate the issue, the header scroll smoothly on my end. Is the issue only happening to a specific device/browser? Try clearing your browser’s cache and test it on a different computer/browser.

Cheers,

#9

It still happens in Safari 12.1.2, macOS 10.14.6.

#10

Hello @RSMG,

I have logged in and edited your header. I changed the initial position to “Absolute”.

Please check your site header now.

#11

Its still erratic… see the video in secure note.

#12

Hey @RSMG,

The issue only seems drastic in your home page and it’s probably because of the animation of Slider Revolution (see attached). The sticky feature is powered by Javascript and it can be affected by other Javascript powered components like a slider with animations.

To mitigate this issue, I’ve temporarily added this CSS code in the bar’s Element CSS. The issue is fixed at least in my test. Just note that this is only for a single bar.

$el.x-bar {
  position:fixed;
}

I’ve saved your header as a template so I could test it in my dummy site.

Hope that helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.