The Newspack Themes allow you to toggle different options for the site’s header, to change its appearance and the number of menus that will appear. The header will also display a search icon that will toggle a search box open and closed.

These options are available under Customize > Header Settings, and can be combined to create a unique header appearance.

Appearance

To customize the Header’s appearance, navigate to Customize > Header Settings > Appearance.

By default, your Site Logo will be aligned left. When the Center Logo option is selected, the logo will, as expected, be centered. Some other elements will move around in the header, too, to keep it balanced.

When this is the only option selected, the search and Tertiary menu will appear to the right of your logo, and the social links menu will appear to the left:

When paired with the Short Header option, the Primary Menu will appear on the left, and Tertiary Menu and search will appear on the right:

Solid Background

The Solid Background option for the header can behave a bit differently, depending on the Child Theme you’ve selected.

For the Newspack Theme, Newspack Scott and Newspack Nelson, the primary color will be used by default. with a dark gray bottom bar for the primary menu:

For Newspack Katharine and Newspack Sacha, a dark gray will be used:

And for Newspack Joseph, black will be used:

You can also change the header color by navigating to the Colors panel once the Solid Background option is checked, and selecting ‘Custom’ under the ‘Header Background Color’ settings. Learn more about changing the header color in the Custom Colors section.

Short Header

The Short Header option creates a simpler, shorter header. It’s best suited to sites with limited navigation, as it greatly reduces the space available for links in the Primary Menu without it wrapping to two lines.

The Sticky Header makes the header stay at the top of the page as you’re scrolling.

To keep this functionality AMP-compatibility, the header’s appearance remains the same on scroll, so it’s recommended to use this option with shorter headers so they don’t cover too much of the page.

Subpage Header

The Newspack Theme includes an option to use a greatly simplified header on posts, archives, search results and subpages on your site.

To enable the simplified Subpage Header, follow these steps:

  1. Navigate to Customize > Header Settings > Subpage Header.
  1. Check the option labelled Use simple header on subpages.
  2. Click Publish.

On your homepage, the header should look the same, but if you navigate to a single post, it will be quite stripped down:

All of the menus you’ve assigned to the header will be hidden under the ‘hamburger’ menu toggle:

If you’ve set a Centered Logo, or a Solid Background on your header, those will be applied to your simplified subpage header, too:

When the simplified header is paired with the featured image ‘Behind article title‘ or ‘Beside article title‘ placement, it will use a transparent background to really bring focus to your story.

Alternative Logo

In some cases, when paired with the ‘Behind article title’ or ‘Beside article options’, your logo may not have sufficient contrast (like in the screenshots above). This will typically happen when your logo is darker.

In these cases, you can upload an alternative logo under Customize > Header Settings > Subpage Header — this option will appear when you have ‘Use simple header on subpages’ checked:

This logo will only be used on posts with the featured image set to ‘Behind article title’ or ‘Beside article options’. It should be a light or white version of your logo, for maximum legibility:

Mobile Call-to-Action

The Newspack Themes include an option to display a mobile-specific call-to-action in the header. When enabled, it will appear next to the menu toggle on the right.

We recommend using this option to drive mobile traffic to your donation page, but it can be customized for other use cases, too.

To add a Mobile Call-to-Action to your site, follow these steps:

  1. Navigate to Customize > Header Settings > Mobile Call-to-Action.
  1. To enable the Mobile Call-to-Action on your site, check Show Mobile CTA.
  2. By default, the button will use the text “Donate”, but if you’d like something more custom, you can change the text under, Button Text.
  3. Under Button URL, you can include a link to a page on your site, or a page on a third-party site. The Button URL is also required to have the button display; if this field is left empty, the button will not show up.
  4. If you’d like to have the CTA link open in a new window, check Open link in new window.
  5. Lastly, by default the button will use a red background, but you can use the Background Color option to change it. We recommend using a bold color that’s not currently featured on your site, to help it really stand out.
  6. Click Publish to save your changes.

The Mobile Call-to-Action will display using your settings next to the mobile menu toggle. When this option is enabled, the mobile menu toggle will no longer display the ‘Menu’ text — to help keep focus on your CTA button — but it will still be available to screen readers.

Support Home

Customizing the Header

Theme Table of Contents