Header

Make sure that navigation menus have a correct accessible name via aria-label. In WordPress, this is derived from the name of the assigned navigation menu.

Customizing

The custom theme defines CSS variables that simplify the visual customization of the custom headers. Alternatively, they can be overridden in the Site Editor using custom CSS. Note that the variables are scoped to the header template part and must therefore be defined in .site-header rather than :root.

Each submenu also has an individual CSS class so that the respective menu can be targeted.

How it works

All header patterns are set up as <div> elements — this is correct, as they are included within a <header> element in the header template part.

Depending on the pattern, the navigation, search, or both are toggled via a toggle button.

Toggle buttons

Two buttons are dynamically rendered via JS:

Selector	Icon	Opens
.toggle-button-menu	#icon-menu (Hamburger)	#toggle-container-menu
.toggle-button-search	#icon-search (Magnifier)	#toggle-container-search

Toggle containers

The containers group all elements that are shown and hidden via a button. Each container has an ID for JS and a class for styling:

• #toggle-container-menu / .toggle-container-menu
• #toggle-container-search / .toggle-container-search

Visibility is controlled via aria-hidden, which is set by JS. Submenus work on the same principle.

Breakpoint

The breakpoint for the custom headers is defined as an SCSS variable in globals/_header.scss and simultaneously exported as a CSS custom property. The JS reads --header-breakpoint at runtime and uses matchMedia(). The breakpoint only needs to be changed in one place in the SCSS code.

$header-breakpoint: 50rem; // SCSS for media queries

:root {
  --header-breakpoint: #{$header-breakpoint};
}