• Site logo

    Pin Demo

My Image

Pin Stack

for RapidWeaver

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
My Image
My Image

Pin

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 this page in the Tesla Theme

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 super flexible

Virtually anything can be pinned anywhere.

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

Check out the other example pages

and see what you can do with Pin


Stacks on this Page

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



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 effect