[Support request] Sticky header is Jumpy

[Tom]

It’s strange that the CSS above did anything as your navigation doesn’t have a .menu-bar-item item.

I’ve been playing with this and I’m having trouble spotting the issue.

On the other sites you’re seeing this issue with, are you using a mega menu plugin? If not, can you link me to one of those so I can see the behavior with a default navigation?

Let me know 🙂

[John]

Sorry, I didn’t realize this one was using MegaMenu. I will get you a large list of non-megamenu sites to look at.

[John]

Ok, I just emailed it.

[Tom]

Think I see the issue – it’s already fixed in 2.1.0 (coming soon).

Try add this for now:

#sticky-placeholder {
    width: auto !important;
}

Let me know 🙂

[John]

That did it!

Tom, you’re a WordPress Wizard with truly magical skills and I can’t tell you how happy this makes me! I’ve never regretted my decision to choose GeneratePress for my company’s ONLY theme builder 5 years ago when you were just a baby plugin and you literally never cease to amaze me. Not just you but your whole team. This forum is a real blessing to me and my company. I try to donate regularly because it’s almost impossible to find companies that provide such a genuinely caring support for their product and the community. Keep up the good work!

[Tom]

Thank you, John! Really means a lot. Thanks for all your support over the years 🙂

[Rafał]

Hi there!
I’ve spent a couple of hours to figure out this wired jumpy behavior. Anyway, width: auto !important does not help in my case – where the header is packed quite tightly with wide branding and main menu.

That’s why #sticky-placeholder cannot lay out in a single row – its children stack one after other, because there’s no room for them.

#sticky-navigation got display: none temporarily, to see better the situation:

#sticky-placeholder got visibility: visible temporarily, to see better the situation:

If
#sticky-placeholder has already property left: 0,
and header.site-header – the outer container – has already property position: relative
(GP 3.1 / GP Premium 2.2.1)
so, the solution is:

#sticky-placeholder {
    position: absolute;
}

🙂

[David]

Hi there,

we’re looking at rewriting the sticky navigation to overcome some of these problems as well as to remover jQuery. In the meantime thanks for your feedback, much appreciated as i am sure it may help others.

[Ian]

Excellent that sticky nav won’t require jquery in the future. Is there a timeline for this so I can estimate things on my end?

[David]

We’re still looking for a good solution that provides the transitions that jQuery can offer… which is proving a trickier task then we first thought. So no definitive timeline as yet

[Ian]

Thanks for your reply David. Currently, an easy way to stick a block element is to use css (say a top bar above the header). I wonder if something similar can be done while the user scrolls and the sticky nav menu pops. Maybe jquery is needed for the nav section to display + stick or just stick? Short of rebuilding the full header, I think this would be great feature if it can be accomplished through GPP. Thx!

[David]

Yeah CSS sticky is a good option. and would be the base that we lead with on a new version when no transitioning is required. Transitions just cause a layer of headache and potential jankiness – and we want to do it right. Or in the worse case scenario we give uses the jQuery option if they want transition.

[Author]

Posts