How to make a Single Row Sticky in a Multi-Row Header in Bricks Builder

Make sure to give some value to the max-height in top header (header section that you want to hide after scroll). This will help make the animation feel smooth when scrolling otherwise it will abruptly disappear which doesn’t look good.

For this example in the video, I have given 100px but if your top header height is more than 100px then give size accordingly. Basically, you can give any max-height to the top header as long as it doesn’t break the layout of your header.

So for safer you can also give a max-height of 500px. Please watch video for more clarity.

Custom CSS For Hiding the Top Header

.scrolling .top_header{
     max-height: 0;
     overflow: hidden;
     opacity: 0.5;
}

.scrolling .top_header div{
     opacity: 0;
}

.top_header div{
     transition: all 0.5s ease-in-out!important;
}