Arrange content in your site’s header

The header is the topmost section of your website that typically appears on every page and contains key elements such as your site title or logo, a navigation menu, and sometimes a search bar or a call-to-action button. This guide will show you how to arrange the elements 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 check your site’s dashboard for Appearance → Editor.

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 to locate and edit your header.

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

1. While editing the Header template part, open List View by clicking the three horizontal lines icon 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.

For more, see the guide to moving blocks.

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 three horizontal lines icon 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 three horizontal lines icon 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 three horizontal lines icon 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.