Header with two bars side-by-side - one sticky, the other not

[nblund]

Hi there,

Please see attached image. I want to set up a header in Pro with four bars where three of them are side by side:

1. One sticky bar is on the left
2. Second bar in the middle - disappears upon scrolling
3. Third sticky bar on the right

The fourth bar is an underlying (z-indexed) bar that ensures the background is styled (coloured white) no matter where on the header a user will hover. The three other bars will also turn white on hover.

I tried applying flex box and setting width to auto. But that didn’t make it. How can I solve this please?
Login credentials in the secure note. Thanks.

[christian]

Hey @nblund,

It’s not clear what you want to accomplish. Do you want your 2nd bar that disappears to be with the 1st bar like the GIF below?

If so, delete the Container right from your 1st bar and move the Container right from your 2nd bar to the 1st bar replacing the empty Container.

Then, set the 1st Bar’s Flexbox > Horizontal to Space Between.

Then, you can delete the 2nd bar as it no longer used.

If you want is different from that, please detail what you want to accomplish.

Thanks.

[nblund]

Hi @Christian,

Thanks although that was not precisely what I had in mind:

In terms of layout before you scroll I want it as shown in your gif and my photo. However, upon scrolling the first / left container as well as the logo to the right must stay sticky whereas the second container in the middle (named right container) must scroll up and out of the screen.

My problem with using one bar only is that I can not make the middle container scroll up while the left container and the logo remains sticky.

On the other hand, my problem with using two bars is that they overlap, which makes it impossible to hover whichever of the containers that have the lowest z-index. I tried limiting the width of a container, but that didn’t work.

Did that make it clearer to you?

[ruenel]

Hello @nblund,

Regretfully what you have in mind is not possible in the Header builder. We can set up a Bar element and make it “Sticky”. The Bar element occupies the whole stretch of the browser width. There isn’t a feature that you can have two Bar elements on the same row. It may be possible with custom development and this is beyond the scope of our support already.

Thank you for your understanding.

[nblund]

Okay. Thank you for your support.

[tristup]

Hi @nblund,

You are most welcome.