Sticky header that really stick to the top and not jumps

Hi there,

Is there a fix for a sticky header that jumps – stay “glued” on top all the time. It makes a little jump when you scroll up and hit the top. And on mobile it jumps also when beginning to scroll down from the top.

Hi There,

Thanks for writing in!

I can see the header is not sticky in the mobile. To help you with this can you please send us your login details in a secure note so that we can have a look.
Before that please check this following.

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.
  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  5. Remove custom CSS, Javascript and templates.

Hope this helps!

Ok! Thanx :slight_smile:

Hey @pcnordhaug,

I checked your site and it’s sticky like your sample site. I see no jumping. Please watch the screencast in the secure note.

Would you mind providing the Operating System and the browser you’re using? Provide their version numbers too.

Thanks.

Yes, it’s sticky - but it jumps - just like explained earlier. Specially on mobile (and you have to see it ON the mobile - not just simulate on desktop) :wink:
Have testet with several browsers on both desktop and mobile.

Hi @pcnordhaug,

In standard X, the sticky menu is inactive for mobile devices automatically. And that’s one of the reason, issue similar to yours. The solution would be is adding different header bar for desktop and mobile, sticky bar for desktop and nonsticky bar for mobile.

Scrolling in a desktop is different than mobile, you have to tap and hold then scroll in mobile which basically multiple events. And scrolling and re-rendering happen when you release the tap creating delays and jumps. Another thing that affects it is the browser address bar that disappears while you scroll changing the visible height of the page, hence, jumps too. And address bar of the browser isn’t controllable by any code.

Thanks!

Thanx for the reply! But isn´t there something i can do? Because i know, or rather see, that it can be done. Look at the site in the url i post below in private. test both on mobile and desktop. This is perfect!

Hey @pcnordhaug,

I see what you mean now. That is because unlike your sample site’s header which is simply positioned fixed, Pro’s bar is positioned relative when the scrollbar is at the very top. When you scroll down, the script that makes the bar positioned fixed kicks in. An animation adds up to that effect.

The solution for this is custom CSS. Please add a class to your Bar and add the code below to your Header CSS. Change test with your own class. Watch the video in the secure note to clearly see what I mean.

.test.x-bar {
    position: fixed;
    width: 100%;
    top: 0;
}

.test.x-bar-space {
    display: block !important;
}

Please note that we’re using custom CSS here. I only showed you that to serve as a guide and it’s only applicable if you will only use 1 bar. That might also not be the best solution. We also will not support issues that might arise from the use of it nor we will provide further enhancements.

Please also note that the sticky behavior was intentionally designed to work that way because of the possibilities you can do with the Header builder like making multiple bars sticky so a complex script is needed to achieve that. I will however add your concern to our issue tracker so our development team would be made aware of this case.

Thanks.

Awesome support @christian_y! This worked excellent and was exactly what I was looking for. I realize that this is custom CSS and the challenges in the way the header are set up. However, have changed some other CSS too to get the page the way I want so it fine.

Also aware that the sticky behavior was intentionally designed to work the way it did and that it’s a complex script needed for that. Anyway, for the simple header I was looking for here, I feel it should be possible without custom CSS. Especially if you are not so steady with cumsom CSS. Whatever and certainly no problem for me now - this worked out excellent :slight_smile:

Thank you!

You’re welcome. Glad we could help.

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