How to Make a Layer Sticky

Video Tutorial:

Article:

Layer alignment controls the layer’s position relative to the top or bottom of the browser window. This is useful for putting layers exactly where you want them and keeping them there: you can make sticky footers, sticky headers, or just keep your message in view.

Not sure what layer alignment you need? Choose Top, as this is the one that works best in general situations.

1. In the Page Builder, click the Layers button in the top toolbar. Add a new layer, or click to edit an existing layer.
2. Click to toggle align to Top or Bottom.

Align to Bottom

This will keep your layer sticking to the bottom of the page, and is useful for creating sticky footers or attention bars.

Layers that are aligned to the bottom cannot be made scrollable: this is because it’s impossible to scroll past once they’re fixed to the bottom.

Align to Top

This will keep your layer sticking to the top of the page, and is useful for creating sticky headers or navigation menus.

Layers that are aligned to the top can be made scrollable. The top of the layer will stay fixed to the top of your page.

You might not notice layer relativity if your page is short enough to be contained on the browser’s screen.

WARNING: Beware of changing top/bottom alignment while your layer is under construction, as your layers may not behave as expected. Align to bottom works by reversing the Y-axis, so if you’ve positioned something 100px down from the top of the page on a layer set to align to Top and switch it to Bottom, it will move to 100px above the bottom of the screen. Always Save before you make changes, and if your layer flies off the screen, hit Undo or refresh the page.