Skip to main content

Pin headers and buttons to the screen

Learn how to use the "fixed position" setting to keep elements like headers and buttons visible on screen while scrolling. We'll also cover what to check if pinning isn't working as expected.

If you want elements like a header or CTA button to stay visible on screen at all times, set the box's position to "Fixed." You can also have multiple boxes fixed on the same page at once.

Notes on Fixed Position

The Fixed position can only be applied when the element you want to set is placed directly under <div> Base. If "Fixed" doesn't appear in the [Distance] field, check the box's layer structure.

If the box isn't directly under <div> Base, open the Layers panel, drag and drop the box into <div> Base, and then set the Fixed position.


Steps

  1. On the screen, select the box you want to keep fixed in view.

  2. In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.

  3. Under [Position], open the dropdown in the [Position] field and select [Fixed].

  4. Adjust where the fixed element appears on the screen.

    Either drag the box on the screen to the position you want, or enter a numeric value in the [Distance] field under the [Box] tab to set the distance from the closest edge of the screen.

Tip: Pinning a box to the bottom of the screen

To pin a box to the bottom or right edge of the screen, move it close to that edge. You can then specify the distance from that edge.

  1. Select the box you've set to Fixed position.

  2. Drag the element toward the bottom edge of the screen.

  3. If needed, enter a number in the [Distance] field to fine-tune the position in pixels.


always visible header fixed persistent always on screen

Did this answer your question?