Style your site’s header

Your header appears at the top of every page on your site and creates the first impression for visitors. In this guide, you will learn how to apply a header background, make a header sticky, and customize the fonts used in your header.

To follow the steps in this guide, you need a theme that supports the Site Editor. Check if your site uses the Site Editor by looking for Appearance → Editor in your site’s dashboard.

You’ll need to access your Header template part. If you haven’t done this before, follow the instructions in our customize your header guide.

Changing your header’s background color helps establish your brand identity and makes your navigation elements stand out. To change the background color:

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. Navigate to the Group block within your header template part.

3. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
4. Apply either a background color or add a background image.

Learn more about colors or background images.

A sticky header stays fixed on the screen as your visitor scrolls through your site. To create a sticky header, follow these steps:

1. Navigate to Appearance → Editor from your dashboard.
2. Click the homepage preview on the right, or select the Templates tab to customize a specific template.
3. Click the List View icon in the top-left corner.
4. Select the topmost header element, click the three dots (⋮), and select the Group option to place the header inside a Group block.
5. In the block settings sidebar, set the “Position” to Sticky.
6. Click the Save button to save your changes.

Learn how to style the Group block that your sticky elements are in. Or, learn how to adjust the Group block’s layout.

Learn more about making sticky elements.

Customizing your header’s typography helps establish your brand’s visual identity and improves readability. To change font styles:

1. While editing the header template part, click the text element you want to modify (site title, menu, etc.).
2. In the block settings sidebar, click the Styles icon. The styles icon looks like a black and white circle.
3. Locate the Typography settings to adjust font family, size, weight, or other options.
4. Click the Save button to save your changes.

Learn more about custom fonts.