Multiple sticky header bars don't pop-up at the same time

[Hindrik]

Hi there,

I’m struggling to make a nice smooth sticky header for one of my websites. It’s impossibile to put everything in one bar, since I need to have some elements in column alignment, and some in a row, which is why I use two bars. I duplicated them, made them sticky and enabled the option to hide them initially. However, they don’t pop-up at the same time (which makes sense because the browser hasn’t yet reached the top of the bar when the other bar is already sticky. I tried playing around with triggers and offsets, but I can’t get it working.

How can I get my two bars pop-up at the exact same time to provide my clients customers with a smooth experience.

See example on developer environment: https://swanneblom.raap.media/

[ruenel]

Hello @Hindrik,

Thanks for writing in! To get your issue resolved, please edit your header and in the respective bar settings, you must set the “Trigger Offset” to at least 200 (for both bars).

Hope this helps.

[Hindrik]

Thanks for your reply. Unfortunately this isn’t working. I’ve added a trigger offset of 200 to both bars, but nothing is happening. There is no cache active if you’re wondering. The bars are set on absolute positioning instead of relative, however I tried switching them which also didn’t help.

[christian]

Hey Hindrik,

In that case, please set the Trigger Offset of both bars back to 0.

What your seeing is the effect of Initially Hidden bars. Regretfully, there is no option to prevent bar stacking behavior. Initially, Hidden bars are also absolute positioned bars. The relative position will have no effect on it.

Thank you for understanding.