Site Header

The Header is a core structural part of a website. It typically appears at the top of every page and helps visitors understand how to navigate the site.

Most Headers include a combination of the following elements:

  1. Site Logo
  2. Navigation(s)
  3. Primary menu (main navigation)
  4. Utility menu (secondary or supporting navigation)
  5. Site Search
  6. Call to action (often a button-style link)
  7. Mobile menu toggle

Not every site includes all of these elements, and their placement may vary. Some sites may also include additional custom features. The structure and editing approach, however, remain consistent.

Accessing the site header

The Site Header is managed as a Template Part within the Site Editor. While the design and exact layout may vary by project, the Site Header is generally built from a consistent set of elements — a logo, navigation menus, search, and sometimes a call to action. Editing the Site Header uses the same visual block editor experience, but changes here have a much broader impact.

Site Header editing happens in the Site Editor.

  1. From the WordPress dashboard, go to Appearance → Editor
  2. Select Patterns, then All template parts
  3. Click “header” to begin editing.

You are now editing a template part.

Note: Changes to the Site Header affect every page that uses it. Preview is not available for template parts, but it is important to review your change carefully after publishing..

Site header structure

The Site Header is built using a collection of blocks, similar to building content on a page. However, it relies more heavily on Groups, alignment, and nested structure to ensure consistent layout and responsive behavior.

Several distinct blocks that are only used for the Site Header are available including: Site Logo, Site Search, Navigation Wrapper, and Menu Toggle.

Additionally, the menus are included as additional template parts nested inside the header. These template parts are included just as any other block, however you can identify a template block by a purple icon in the block toolbar when the block is selected and also a purple icon next to the block name in List View.

Since the menus can have a complex structure and may be edited more frequently, having them isolated as separate template parts allows these to be edited directly and intentionally.

Use List View to understand structure

When editing the Site Header, it’s strongly recommended to open List View.

List View allows you to:

  • See the full block hierarchy
  • Select the correct block more easily
  • Understand how blocks are grouped and nested

The Header layout depends on carefully structured Group blocks. Changing nesting, alignment, or widths can unintentionally break layout behavior, especially across screen sizes.

The Site Logo block controls the logo displayed in the Site Header.

Changing the logo

With the Site Logo block selected:

  • Use Replace in the block toolbar
  • Or use the Media options in the block settings sidebar

You can upload a new image or select one from the Media Library.
When replacing the logo, it’s recommended to use the same dimensions as the previous logo before uploading. Depending on the new logo dimensions it may need to be resized to fit the design.

Resizing the logo

You can resize the logo by:

  • Dragging the resize handles directly in the editor
  • Adjusting the Image width setting in the block settings sidebar

Site Logo settings

The block settings sidebar includes the following options:

  1. Link image to home: This should usually be enabled to allow users to return to the homepage by clicking the logo
  2. Open in new tab: Should remain disabled
  3. Use as site icon: Should remain disabled and the Site Icon (favicon) is managed in global site settings.

Block styles

  • Rounded: Applies rounded corners to the logo image

Navigation menus

The Primary menu and Utility menu are the most commonly edited elements in the Site Header.

These menus are managed as separate template parts because they contain more complex block structures.

Editing a menu template

While editing the Header:

  1. Select the Primary Menu or Utility Menu block
  2. Click Edit in the block toolbar
  3. The editor switches to that menu’s template
  4. Use Back to return to the Header template

Alternatively from the WordPress Dashboard, these templates can be accessed directly from Appearance → Editor → Patterns → All template parts.

Each menu template has its own structure and behavior. Detailed instructions for managing menus are covered in separate documentation.

Any menu used in the Site Header must be contained within a Navigation Wrapper block. This block exists to support accessibility, not layout or styling.

The Navigation Wrapper block has a single setting that allows screen readers to help users quickly identify and navigate between different menus.

Aria label: Enter a clear and descriptive label for each menu, such as: “Main Menu”
or “Secondary Menu”

The Masthead Search block has no settings. It is simply placed visually where needed within the Site Header. Its behavior and accessibility are handled automatically.

Some Headers include a Button block used as a call to action.

  • Button text, links, and styles can be edited using standard Button block controls
  • Buttons are often placed inline with the primary navigation

Detailed guidance for editing Button blocks is covered in separate documentation.

Mobile menu toggle

The Menu Toggle block represents the mobile menu control. It has no settings. It is usually placed inline with the primary navigation.

On the front end the menu toggle will only appear on smaller screen sizes. The mobile menu automatically includes all items from the Primary menu. Some sites may also include items from the Utility menus or other custom elements within the mobile menu. There is no ability to create or manage a separate mobile menu.

Publishing changes

The Site Header is a template part, and previewing changes is not available.
Once updates are complete click Save to publish your changes
Changes will take effect immediately wherever it’s used.

Making changes safely

Editing the Header is more advanced than editing page content. Because the Site Header is shared across the site, even small edits can have a wide impact.

Before making changes:

  • Be comfortable using the block editor
  • Use List View to understand structure
  • Avoid changing group nesting, widths, or alignment unless necessary
  • Make small, intentional changes
  • Save and review carefully

Tips for editors

Understand what you’re editing

If a block is a template block, edit it using the Edit option rather than trying to rebuild it inside the Site Header.

Change content, not structure

Text, images, and links are usually safe to update. Structural changes should be made carefully and intentionally.

Review on multiple screen sizes

The Site Header is responsive by design. Always check both desktop and mobile views before publishing.

When in doubt, pause

If you’re unsure what a block does or how it’s nested, stop and inspect it in List View before proceeding.