Keep blocks visible as you scroll

A sticky element is a block of your website that remains “fixed” when a visitor scrolls down your page. This guide will explain how to create sticky elements with popular examples for buttons, headers, and menus. Use the same steps to make anything on your site sticky.

To make any block or group of blocks sticky, you will place the block(s) inside a Group block, which has a special “sticky” position setting. Follow these steps to create a sticky element on your site:

1. Visit your site’s dashboard.
2. Navigate to Pages, Posts, or Appearance → Templates to edit the content you want to make sticky.
3. Select List View in the top-left corner of the editor. It’s the icon that looks like three horizontal lines above each other.
4. Select an existing Group block or create a new one.
   • To quickly create a group, select multiple elements and click the three dots (⋮), and select “Group” to place them inside a Group block.
   • To be sticky, an element must be in a top-level position (i.e., not nested within other blocks).
5. In the Group block settings sidebar, locate the “Position” section and select the “Sticky” option from the drop-down.
6. Click the Save button to apply the changes to your template.

Learn more about further customizing the style and layout of a Group block that your sticky elements are in.

Creating a sticky menu means that the entire menu stays “fixed” while the viewer scrolls down the page. To create a sticky menu, follow these steps:

1. Navigate to Appearance → Editor from your dashboard.
2. Select the Templates tab and click the template with your header.
3. Select List View in the top-left corner of the editor. It’s the icon that looks like three horizontal lines above each other.
4. Select the Navigation block, and make sure it is a top-level element. In most cases, a Navigation block is nested within a header template part or similar layout element, so you will need to move it out on its own.
5. Click the three dots (⋮) next to the Navigation block item, and select “Group” to place the menu inside a Group block.
6. In the block settings sidebar, set the Position to Sticky.
   • You may also want to change the background color of the group so the text of the menu is readable as it scrolls over various content.
7. Click the Save button to save your changes.

Learn more about further customizing the style and layout of a Group block that your sticky elements are in.

A sticky header stays fixed on the screen as your visitor scrolls through your site. Learn how to create a sticky header.