Make a Sticky Element

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.

In this guide

1. Video Tutorial
2. Make Any Element Sticky
3. Create a Sticky Header
   1. Video: Sticky Header Tutorial
4. Create a Sticky Menu

Video Tutorial

The video below shows how you can create a sticky element using a Buttons block as an example. You can follow the same steps with any block.

Slow down or speed up the video using the controls in the lower right corner after clicking the “Play” icon.

Make Any Element Sticky

To make any block or group of blocks sticky, you can place the block(s) inside of a Group block which has a special “sticky” position setting. The full steps to make a sticky element are as follows:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Navigate to the area of your site that has the block you want to make sticky. This could be a template or page.
4. In the editor, open the List View either by clicking the icon at the top of the editor or by using the keyboard shortcut Shift+Alt+O on a PC or ⌃⌥O on a Mac.
5. Insert a new block or select a nested block from the List View and drag it to the left so it is not nested within any other blocks. To be sticky, an element must be in a top-level position (i.e., not nested within other blocks).
6. In the List View, click the three dots to the right of the block and select the “Group” option to place it inside of a Group block.
7. In the Group block settings sidebar, locate the “Position” section and select the “Sticky” option from the drop-down.
8. Click the “Save” button to apply the changes to your template.

You can also customize the design of the Group block by changing the block’s background color, adding a background image, and adjusting the layout settings.

Create a Sticky Header

In the video below, you can see an example of how a sticky header works. The entire header stays “fixed” while the viewer scrolls down the page.

Slow down or speed up the video using the controls in the lower right corner after clicking the “Play” icon.

To create a sticky header, follow these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Click Templates and click the template that has the header you want to make sticky.
4. In the editor, open the List View either by clicking the icon at the top of the editor or by using the keyboard shortcut Shift+Alt+O on a PC or ⌃⌥O on a Mac.
5. Select the topmost element of your header (for example, if you’re using a Header Template Part, it would be the name of the template part).
6. In the List View, click the three dots to the right of the block and select the “Group” option to place it inside of a Group block.
7. In the Group block settings sidebar, locate the “Position” section and select the “Sticky” option from the drop-down.
8. Click the “Save” button to apply the changes to your template.

You can also customize the design of the Group block by changing the block’s background color, adding a background image, and adjusting the layout settings.

Video: Sticky Header Tutorial

Slow down or speed up the video using the controls in the lower right corner after clicking the “Play” icon.

Create a Sticky Menu

In the video below, you can see an example of how a sticky menu works. The entire menu stays “fixed” while the viewer scrolls down the page.

Slow down or speed up the video using the controls in the lower right corner after clicking the “Play” icon.

To create a sticky menu, follow these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Click Templates and click the template that has the menu you want to make sticky.
4. In the editor, open the List View either by clicking the icon at the top of the editor or by using the keyboard shortcut Shift+Alt+O on a PC or ⌃⌥O on a Mac.
5. Locate the nested Navigation block and drag it out of the list so 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.)
6. In the List View, click the three dots to the right of the Navigation block and select the “Group” option to place it inside of a Group block.
7. In the Group block settings sidebar, locate the “Position” section and select the “Sticky” option from the drop-down.
8. Click the “Save” button to apply the changes to your template.

You can also customize the design of the Group block by changing the block’s background color, adding a background image, and adjusting the layout settings.

Slow down or speed up the video using the controls in the lower right corner after clicking the “Play” icon.