Just a sticky section, not the complete header

Hi,

I have a header that has 3 sections on top of each other.

I would like only one of them (the 3rd) to be sticky when scrolling.

Can someone help me, with a little input?

Daniel

1 Like

Try setting your 3rd section’s position to sticky with a top value like 0 or 10px.

Yes, I think ‘Sections’ should be sticky capable.
I do not see that sections can be ‘sticky’.
Only a Header can be sticky, and there can be only one Header per post type, I think.
Multiple headers might solve this stickiness problem, where either one can be sticky.
Anyone have words of wisdom for this?

We can set the position property’s value to sticky with a top value to make any element as sticky.

Example: Sticky Columns – Bricks Sections.

Thank you so much for the super quick reply!
Sorry, I didn’t see the link in your first reply, just my first day at Bricks :0/

How did you end up achieving making 1 section sticky in a header with multiple sections?
Giving a section in my header the position:sticky and top: 0 value didn’t work.

1 Like

Hey you can watch this video to achieve the functionality. I hope it helps. Please let me know if there is any doubt

2 Likes

Great video! Thanks for sharing!

I have an additional question: my section above the sticky part is larger … so I want to scroll until the sticky section is on top and then “stick it”.

Can anybody help me out here!???

Michael

this adds or remove class depending on the height value it is 180 now you can change it to anything.

1 Like

Thank you! Different approach but same goal … will give that a try!