Strange snapping issue with sticky menu bar

Support
#1

I have a fixed header with a regular topbar above it. I’m experiencing a weird “snapping” of the content inside (logo and menu) when scrolling back to top, like it isn’t fixed to the bar’s position.

I’ve recorded a video of it here

This is a live public website so I’ll post the URL so you can see it in action as well: live site here

Please note that I have already tried the usual deactivating all plugins and swapping back to regular Pro theme instead of my child theme, but the issue persists.

I assume I’m missing a little setting somewhere?

Thanks in advance for your help!

#2

Hi @liquidedge,

Thank you for writing in, you can set a Trigger Offset to your sticky bar so it does not snap immediately. The height of your sticky bar is a good value to offset.

Alternatively, you can duplicate your sticky bar, set the duplicate bar to Hide Initially, and turn off the sticky bar option of the original bar. This will create a smooth sticky bar transition.

Hope it helps,
Cheers!

#3

Hmm, that doesn’t appear to solve anything. It just makes the bar snap to the top of the window after bit of a delay, which makes it look even worse.

I’ve added the height of the bar as the trigger offset (with and without units- px units seem to get removed?) and the issue with the strange snapping is persisting…

#4

It appears that you’ve completely misunderstood my question now that I read it back again. I don’t want to delay the snap, I want to eliminate the weird effect when you scroll back to the top and the content jumps down.

#5

Hi @liquidedge,

That happens if the BAR Sticky Shrink Amount is 0. 0 should not be used as that means complete collapsed bar. The bar is shrinking to 0px then up so you perceive it as snapping. Try to set it to 1.

#6

Like this?

That makes no difference…

#7

Hi @liquidedge,

Can you try then to add the following CSS on Sticky Bar > Customize Tab : Element CSS:

$el.x-bar {
    -webkit-transition: all 2s;
    transition: all 2s;
    position: fixed;
    width: 100%;
    top: 52px;
}

It will delay the sticky bar.

#8

No, that does not fix the issue.

Compare the behaviour of the sticky bar to the behaviour of this example:

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

Note that there is no strange snapping when returning to the top of the page.

That is what I’m trying to fix.

#9

Hey @liquidedge,

Thanks for the comparison. The sticky header in my Pro site doesn’t snap too and the only setting that makes it snap in my site is the 0 Shrink Amount. Since it does not help for your case, there could be something else causing the issue with our sticky header.

I see you’ve already tried deactivating plugins and switching to the parent theme so the cause of the issue could be beyond plugin conflict and the parent theme. Please copy your live site to a staging server so we could troubleshoot with plugins and custom code and so your live site won’t break.

Please then give us WordPress login credentials of the staging site in a Secure Note

Thanks.

#10

Secure note shared. I’ve disabled all plugins, and swapped back to the base Pro theme. Let me know what you discover.

#11

Hi @liquidedge,

Thank you for providing the credentials. I checked your setup and it seemed like only the settings issue. I have given the actual heights to the Top Bar and the Main Bar and removed the Trigger Offset from the Main sticky bar. This seems to have fixed the snapping issue and made the transition smooth. You can now use these settings in your live site to get things fixed.

Cheers!

#12

Ahh- perfect. OK, I’ll use these settings as a template for my live sites. So it was the auto height that was the issue?

#13

Ah yes. Sorry if I missed that your bar’s height was set to auto. I should have advised of that as well as this boils down to the height of the bar being recalculated. The Shrink Amount alters the “height of the bar” and if your bar’s height is auto, the script that gives the sticky spacer its height will spend time calculating the height of the bar so that’s another reason for the snapping.

So to summarize, there’s 2 things that could cause snapping.

  • The Sticky Shrink Amount being set to 0
  • auto Bar Height

We’re glad that the issue is resolved now.

1 Like
#14

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