Multiple Bars in Navigation as Sticky Bar

[brewerben]

I am wondering if there is a way to have multiple bars sticky. Right now my top bar sticks, but the second bar below it scrolls over the top bar the sticks above it. Is there a way for the second bar to stay in place without moving?

[rad]

Hi there,

Thanks for writing in.

Let’s say you have two sticky bars, make sure their initial position is RELATIVE instead of ABSOLUTE. That option is available in your header bar’s setup setting (assuming that you already turned on your header bar’s STICKY BAR option).

Now, while you’re on your header bar’s setting, find the STICKY SETUP section and with your FIRST sticky bar, set the Trigger Offset to 0. Then with your second header bar, make sure it’s Trigger Offset is the negative value of first header bar’s height. Let’s say your first header bar’s height is 96px, then your second header bar’s Trigger Offset will be -96.

Then let’s say you added a 3rd header bar, then it’s Trigger Offset should be the negative value of first and second’s total height. Let’s say your second bar has 180px height, then the 3rd header bar’s Trigger Offset is 96px + 180px = 276px, hence -276.

To get your header bar’s height, you should use browser developer tools since it’s the only way to get the final height upon render. https://stackoverflow.com/questions/10234154/how-to-find-computed-size-of-any-element-in-chrome-developer-tools

Thanks!

[brewerben]

Alright, you are sending me on the right track. This is great. So when I start to scroll, the second bar scrolls up until it gets to the top of the page then it jumps down to below the first bar where I want it and is sticky from there. How do I keep it from initially scrolling up then jumping back down?

[lely]

Hi There,

Please do check this temporary fixed: https://theme.co/apex/forum/t/pro-header-top-sticky-bar-goes-behind-second-bar-on-scroll/2623/3. See sample youtube video on the thread.

Hope this helps.