Sticky headers with 2 bars

[RubberDuckers]

Hi there,
A problem that I’ve had (and have just found a solution) but feel it shouldn’t be needed. I’m on 6.2.5.

2 bars in a header, both sticky, both position: relative. First bar, 80px in height, second bar, 40px in height.
They should just both stick, without moving when the page scrolls. However, the second bar always goes below the first. Sometimes it then appears again, stuck, sometimes not.

I added this to the second bar:
$el {
position: fixed!important;
width: 100%!important;
top: auto!important;
}
Position to ensure it stayed there, width as it then didn’t go 100% and top:auto as it kept changing to top:0 (which is why it then wasn’t visible).
I feel that last bit is maybe the key and shouldn’t be happening at all as it’s not the natural behaviour?

[ruenel]

Hey There,

Thanks for writing in! To better assist you with your issue, please provide us the URL of your site. We would love to check your code and test how the latest version handles it without your code.

Best Regards.

[RubberDuckers]

Unfortunately it’s locked in a staging so I can’t share.
It works in that it sticks both bars BUT the ‘position: fixed’ then loses the ‘relative’ and the page goes behind it. Luckily here, it’s only on a handful of pages and only 40px, so just adding that as a margin where needed works. Though it’d be great if double sticky bars worked out the box - if they’re both sticky and both relative, surely they should just sit under one another?
If need be I can template it up and put it a demo URL to show.

[ruenel]

Hello There,

If that is the case, please provide us a screenshot of your custom header, the element structure and some of the Bar element settings so we can try to replicate your custom header in our local testing server.

Thank you in advance.