The header is white by default with left-aligned text logo.

The default desktop header without any menu or logo.
The default mobile header without a logo.

Site identity (logo)

Follow the steps to configure your site identity information:

  1. Go to Appearance → Customize → Site Identity.
  2. Specify your "Site Title" and optionally the "Tagline".
  3. Optionally upload your main image logo (dark).
    1. Format:
      1. Supported formats: JPG, PNG, GIF and more (see get_allowed_mime_types()).
      2. Recommended format: SVG (can be enabled with plugins, see #24251).
    2. Size:
      1. The maximum height of desktop logo is 170px. There is no width restriction.
      2. The maximum height of mobile logo is 32px. There is no width restriction but it should be narrow.
    3. If not uploaded, your "Site Title" and "Tagline" will be displayed instead.
  4. Optionally upload "Mobile logo — dark" or the text logo will be displayed on mobile resolutions.
  5. Optionally upload "Logo — light" if you'll be using the dark desktop header or transparent header (supported only on certain page types).
  6. Optionally upload "Mobile logo — light" if you'll be using the dark mobile header.
Example configuration of Appearance → Customize → Site Identity.



Follow the steps to create your menus:

  1. Create three new menus in Appearance → Menus.
    1. You can turn menu items into icons by specifying one of the CSS classes from the fonts page in the "CSS Classes" field.
  2. Attach your menus to the three locations.
    1. Locations:
      1. Header menu left
      2. Header menu right
      3. Header menu mobile
    2. The logo is centered if both locations (left and right) have menus.
    3. Lack of "Header menu left" will make the logo left-aligned.
    4. Lack of "Header menu right" will make the logo right-aligned.
Example configuration of Appearance → Customize → Menus.

Common issues

  1. Missing "CSS Classes" field.

    You can enable them in "Screen Options" in the top right corner or using the "gear" icon if you're using Appearance → Customize → Menus.

    Appearance → Customize → Menus → CSS Classes should be enabled.

Header options

Visit the body classes article to learn what header style modifiers are available to use in Administration → Theme Settings → Body classes.

Example configurations

Examples of possible desktop header configurations.
Mobile header has one layout configuration with two styles.
If you have completed the actions described in this article and it did not solve your issue, you may:
Search the community forum or file a support ticket