Shifty
‹ BackShifty 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
.