Bottom Sticky header moving past top sticky header

[DesignMunky]

Hi,

I"m building a header where the top bar is set to a sticky header and a second bar moves up to sit underneath it as the user scrolls down.

https://design.healthysites.com.au/homepage-mainstream/

How do I stop the bottom bar from moving slightly up past the bottom of the top bar before dropping back down into it’s sticky position?

Thanks,
Darren.

[ruenel]

Hello Darren,

Thanks for writing in! You can set the transition delay under the Effects module of the Bar element to 0.

If this does not help, kindly provide us your WP access so we can inspect all your custom header settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[DesignMunky]

Hi Ruenel,

It didn’t seem to do the trick I’m afraid. Here’s a screenshot showing how I can still pull Bar 3 up past Bar 1.

I have sent login details as requested.

[ruenel]

Hello @DesignMunky,

You will have to add a trigger selector of calc(100vh-80px) to the Bar 3 element since you have set a height to the Bar 2 element.

This will work smoothly when you are not in the builder and not logged in.

Best Regards.

[DesignMunky]

Hi Ruenel,

That hasn’t seemed to work either. I added the Calc statement to the trigger selector in Bar 3 and as you’ll see from the screen shot here I’m still able to pull bar 3 up over bar 1.

THanks,
Darren.

[DesignMunky]

Actually - I"ve worked it out!

i had some extra CSS on some of the bars that was causing the issues.

Thanks again for your help.

CHeers,
Darren.

[christian]

Glad to hear that, Darren.