.is-sticky class for header

Would it be possible to have an .is-sticky or similar class added for the header when it’s sticky to add css targeting for elements within the header (such as if there’s a top or bottom bar, having them transition opacity or move off screen)?

It’s something I used pretty frequently with elementor headers and it was quite handy, but I can’t see anything similar in the bricks styles

Cheers!

1 Like

This would be great for me as well.
I would like to have sticky header for desktop view, but non-sticky for mobile.

2 Likes

Hi @Pete ,

My understanding is that the header element with id #bricks-header gets the classes .sticky and .fixed when sticky.

So i guess you could target elements within the header using the #bricks-header.sticky.fixed selector.

Tried looking for a change in class when actually active versus just passive and I couldn’t find any. The header gets a sticky class if it’s a sticky header, versus when it’s ACTUALLY sticky, if that makes sense. Will check again at some point when I do my next Bricks checkin, though