Shifty

‹ Back

Shifty is a way to move entire pieces of dom to new areas when a breakpoint is met.

For example, on desktop there is a big success panel right here:

Success!

However on mobile, it will be down here:

<p>For example, on desktop there is a big success panel right here:</p>

<div data-panel-desktop>
  <div class="panel__success panel--padding" data-shifty-target>Success!</div>
</div>

<p>However on mobile, it will be down here:</p>

<div data-panel-mobile></div>

Ornament.C.Shifty.uiElements = [{
  desktop: document.querySelector("[data-panel-desktop]"),
  mobile: document.querySelector("[data-panel-mobile]")
}];

By default it will use the default Ornament.headerBreakpoint as the breakpoint it watches for, however you can over-ride this on the page by setting Ornament.C.Shifty.layoutBreakpoint.