Pin

Sticky and Fixed Stack

Stacks Image 7

Pins - Stick and Fixed Content Anywhere

The Fixed and Sticky Stack for RapidWeaver

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 the Main Pin Demo Site here

Pin works within Columns

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.

Extra Menus

Pin is ideal for having a second sticky navigation element on your page that will fix below your primary menu

Auto Hide

Pinned elements can be set to hide with an animated effect - just like the SlideUp stack does.

See the Auto Hide page for examples.

Pin is ideal for having a second sticky navigation element on your page that will fix below your primary men

Pin is super flexible

Virtually anything can be pinned anywhere.

You can pix by pixel position or by percentage position for maximum flexibility

Stacks Used on This Page

Big White Duck

Pin

Scroll Mate - For Pin logo animations (yes it works in sticky and fixed pin stacks)

Sections - Sections is also used to make the sticky notes on the right hand side.


Joe Workman

CSSBox - to add some padding

Responsive 2 Column




Theme: Tesla

Fix Content - and overlay header images with transparency top bars & headers

Content pinned in a column can be set to expand to full width when the columns are stacked on small screens

Pinned elements may also overlay others to create a stacked effe