Header

The header is white by default with left-aligned text 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.

Notes:

• The Theme Logo WordPress feature doesn't allow you to specify external URL for your logo. Our three additional logo upload fields also don't allow this.
• The logo options are theme modifications. It means they are remembered for each theme separately. Therefore, if you switch your theme to a child theme all your logo fields will become blank for the newly activated child theme. You will have to set them again for the child theme.
• By default it's not possible to have an image logo and text "Site Title" and "Tagline" enabled together.

Menus

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.

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.

   

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