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

Snippet -

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

.header_top {
transition: .3s;
}

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.

#bricksbuilder #brickbuildertutorial #brickbuildertutorials

[annabenko]

Thanks for your tutorial. It helped a lot! <3

[nicomorgan]

This is a nice method but I found that the transition css doesn't work because of this css in Bricks:

#brx-header.sticky .bricks-nav-menu>li>a, #brx-header.sticky>.brxe-block, #brx-header.sticky>.brxe-container, #brx-header.sticky>.brxe-div, {
transition: inherit;
}

[whatamiwitnessing]

This does not seem to be a good solution for me. I want the element to become sticky the moment the bottom header reaches the top of the page and not on scrolling. Any ideas on how?