Pin is a fully responsive solution to make stacks sticky or fixed position.
Pin can hide fixed content on small screens or adjust its fixing position to account for responsive layouts.
On this page, only first info box is set to stick on mobile to preserve screen real estate. The notes on the right are also set to hide on mobile in the Pin stack settings.
See this page in the Tesla Theme
Pin is ideal for having a second sticky navigation element on your page that will fix below your primary menu
Pinned elements can be set to hide with an animated effect - just like the SlideUp stack does.
See the Auto Hide page for examples.
Big White Duck
Pin
Scroll Mate - For Pin logo animations (yes it works in sticky and fixed pin stacks)
Magic Scroll, Magic Link and MagicMarker - To create the scroll down effect on the header
Button Plus - In Icon only mode, inside the Magic Link stack on the header
Sections - in 100% height with adaptive breakpoint. On screens large enough for the content the header is 100% browser height.
- When the content exceeds the browser height Sections automatically goes to normal mode.
- Sections is also used to make the sticky notes on the right hand side.
Sections Fix - To create the bottom fixed container in the header Section for the Button Plus scroll down icon
Grummage Plus and Grummage 2 Col
Header Plus
Paragraph Plus
Joe Workman
Foundation Theme
Top Bar
1 & 2 column Foundation stacks
Header
Paragraph