Bricks

How to Make One Row Sticky in a Multi Row Header in Bricks Builder

Pawan Khatri

Bricks Builder Sticky Header

I was in bit of a pickle when I found that bricks native header sticky option does not allow targeting individual header row to make sticky in a multi row header. After going through the forum https://forum.bricksbuilder.io/t/choo…, I came across an approach wherein a class called sticky was added to one row using javascript onscroll function. My friend Gabriel helped me with a very innovative css trick that uses the native sticky options from bricks and rather hides the row which you do not want to make sticky.

Snippet –

.scrolling .header_top { max-height: 0px; overflow: hidden; padding: 0; }

.header_top { transition: .3s; }