Jumping sticky header

[mustafaaydinol]

Hi,

I’ve just built a header with two bars and tried to make it sticky. Upper bar stays at position but when I scroll down, bottom bar goes up and comes to its position (jumps). This is the link:
http://www.mustafaaydinol.com/uncategorized/hello-world/
Couldn’t solve the problem, hope someone can help.

Thanks

[jrhager84]

I’ve noticed my bars jump when their heights aren’t explicitly set. Are they set to ‘auto’ by chance?

[mustafaaydinol]

Actually I’ve tried everything, read all stuff but couldn’t sort it out. So I’ve tried manual height and auto height as well but didn’t work…

[ruenel]

Hello @mustafaaydinol,

Thanks for posting in! I have check your example page and it does not have a custom header. To better assist you with your issue, kindly provide us access to your site so that we can check your 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/docs/getting-support

Best Regards.

[mustafaaydinol]

Sorry I tried to come up with a solution myself and it took me hours to build up the header to prevent jumping.
Here is the Link.

I also took the screenshots of the setting so maybe it can help someone, I’ll also create a secure note.

[christopher]

Hi @mustafaaydinol,

It seems that you already managed to have the sticky header as you wanted. I checked the front end and there was no flickering problem.

Thank you.

[mustafaaydinol]

Can you check it now please?
Link
Sorry I assigned another header mistakenly that I had a temporary solution. You’ll see what I mean, I’ll give you the credentials to the site.

[christopher]

Hi @mustafaaydinol,

I went to the Header number 3 and fixed the issue. The Bar 1 should have:

And Bar 2:

Thank you.

[mustafaaydinol]

Yes I know that it can be solved when we adjust the setup to relative, but I need it to be absolute. Because when it is set to relative, scrolling effect is not so smooth. Why it doesn’t work with absolute setting?

[friech]

Hi @mustafaaydinol,

Having two sticky bars complicate your setup, I advise that you have a third bar instead and make that third bar as your dedicated sticky bar and set that bar to be Hide Initially, in my opinion, your two sticky bar is taking a large portion of the screen when the user is scrolling its kind of covering a good area of your content. Make your third bar (sticky bar) compact and clean, set your first two bars to not sticky. This setup will resolve your jumping sticky-header issue, have a smooth effect, and a cleaner sticky bar.

Hope it helps,
Cheers!

[mustafaaydinol]

Thank you very much all

[lely]

You’re always welcome @mustafaaydinol!

Cheers.