How do I make part of a header template sticky?

How To
1

I’ve got a header consisting of two section: a logo/search section on top, and a menu section at the bottom.

I’d like to make the menu sticky as I scroll down the page, but not the logo or search.

So far, I can make the menu sticky inside the header, and I can make the entire header sticky (using the template settings), but I can’t make the logo scroll away, and the menu remain.

Any idea how I can accomplish that?

2

I know it’s a 3+ year old post, but if someone needs it a workaround is:

.brx-sticky.on-scroll.scrolling %root%{
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
transition: max-height 0.3s ease, padding 0.3s ease;
}