Position sticky header not working

How To
1

Hi all!
I’ve been messing with the builder for a few hours and I can not seem to get sticky working on my header in bricks. If I make a html doc and try it by just writing the code, it works. If I try to do the same in bricks, it does not work.

Could anyone tell me why? Here is my playground: https://dev.qwamsignals.nl/

2

Have you selected the template type to be header as mentioned here:

After that you will get the header options in the template settings.

I quote from the article in the Bricks Academy:

When editing a header template, an additional Header settings group is available under Settings → Template Settings → Header.

There you can find various header-specific settings such as:

  • Header position (top/right/left)
  • Header width (available when header position is set to left/right)
  • Sticky header (available when header position is set to top)
3

Hi, thanks for trying to help me.
I have indeed tried this, but this sticks the whole header and not just the botton header. i have 3 bars in my header and im trying to only have the bottom one stick. Thats why i tried to use position sticky with top: 0.

Any other ideas on how I could do this? Cause it does not seem to work on my page.

4

If i set a height on the header, it works. But this is not desireable.

5
6

Thanks a lot for the video. I already managed to fix it with javascript and position fixed. I should probably have posted that. Still thanks. Your solution is not really getting the desired effect.
Great video though!

Im trying to get the bottom header to stick when it reaches top of page and not on scroll.

7

I’ve had similar issues with Sticky Headers.
I’ve ended up using BricksExtras which has a Header Row element so you can easily create multi row headers. Even better I can create headers where the lower row scrolls to the top and stays there ( with out going off the top and then back down. Also no CSS )
Highly recommended.