Menu icon Foundation
Can you 'stack' sticky elements?

I want to stack my navbar and a breadcrumbs element, but adding sticky to both causes them to overlap. Is there a way to give them both sticky attributes but offset one by the navbar amount?

sticky

I want to stack my navbar and a breadcrumbs element, but adding sticky to both causes them to overlap. Is there a way to give them both sticky attributes but offset one by the navbar amount?

Brandon Arnold about 2 years ago

There's no dynamic way to do this in Foundation, but you could do this pretty easily with CSS if you know roughly the height of your stacked items. On stack of the bottom item you could add some margin-top thats the height of the other stacked item.

Thats a quick way of making this work pretty easily.

Rafi Benkual about 2 years ago

I used the fixed class on both and gave the breadcrumbs a top margin http://codepen.io/rafibomb/pen/MaWwRX/

Daniel Lewandowski 4 months ago

I'm also running into this issue but the main thing is that the first sticky element has a flexible height from wrapping text depending on the viewport width. 

 

Is there a way to do a recalc or mutateme on the sticky elements and/or have a variable bottom sticky point?

Roy Hinkley 4 months ago

I'd like to re-open this thread, if possible. I have a top nav bar that sticky-shrinks, followed by a large hero image with a horizontal form below the hero image. I want to have the horizontal form "sticky-stack" under the top nav when scrolled. I looked at the pen that Rafi posted above, but it seems to have some problems as it doesn't work or look right.

A fine example is here: http://demo.bigwhiteduck.com/sticky-grummage/, however, I don't know of or use this RapidWeaver software.

Does anyone know if it's possible, with Foundation 6.3.1 to get elements to sticky-stack?