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
Content is contained in the column in which is it pinned.
This is also great for floating body layouts
where you don't want the sticky menu or header to expand to full width when stuck.
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.
Virtually anything can be pinned anywhere.
You can pix by pixel position or by percentage position for maximum flexibility
Big White Duck
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
1 & 2 column Foundation stacks