Arrange content in your site’s header

This guide will show you how to arrange the blocks in your website’s header to create the layout you want.

To follow the steps in this guide, you need a theme that supports the Site Editor. A quick way to check if your site uses the Site Editor is to look for Appearance → Editor in your site’s dashboard.

You’ll need to access your Header template part to rearrange its blocks. If you haven’t done this before, follow the instructions in our Customize Your Header guide.

You can move blocks in your header by following these steps:

1. While editing the Header template part, open List View by clicking the List View icon (three horizontal lines) near the top left of the editor.
2. Find the block you want to move. If you see a > symbol next to a block, click it to expand and see nested blocks.
3. Click and hold on the block’s name, then drag it to the new position.
4. Release to drop the block in its new location.
5. Click the Save button to save your changes.

To place header blocks next to each other horizontally (like a logo next to a site title), you’ll need to group them in a Row block by following these steps:

1. While editing the Header template part, open List View by clicking the List View icon (three horizontal lines) near the top left of the editor.
2. Select the first block you want to place side by side (for example, your logo).
3. Hold down the Shift key (PC) or the Command key (Mac) and click the second block you would like to place beside it (for example, your site title).
4. In the toolbar that appears, click the Row icon.
5. Click the Save button to save your changes.

Learn more about grouping blocks of content together.

To place header blocks one above the other vertically (like a menu above a social icons menu), you’ll need to group them in a Stack block:

1. While editing the Header template part, open List View by clicking the List View icon (three horizontal lines) near the top left of the editor.
2. Select the first block you want to stack (for example, your menu).
3. Hold down the Shift key and click the second block you want to place below it (for example, your social icons menu).
4. In the toolbar that appears, click the Stack icon.
5. Click the Save button to save your changes.

Learn more about grouping blocks of content together.

A full-width header creates a bold look that spans the entire width of the browser window. To make your header full width:

1. While editing the Header template part, open List View by clicking the List View icon (three horizontal lines) near the top left of the editor.
2. Find the Group block containing your header.
   • If your header is not in a group block, click the (⋮) menu and select “Group”.
3. In the toolbar that appears, click the Align icon.
4. Select Full width.
5. Click the Save button to save your changes.

Learn more about creating full width content.