Header

The header houses your site’s logo, navigation, search functionality and optional contact link. The header may be set to sticky so it is always visible, even when a user scrolls. Logo size, header background color and text color may all be defined within the global options.

System ref: GLOBAL OPTIONS / HEADER


Header Sample

The site header

Header Settings


Your site’s header is consistent across all pages. The navigation will automatically be pulled into the header but if you want a contact link then you will need to add it through the header settings.

The Header pane on the global options page
Header settings can be adjusted to meet your needs.

To view the header settings, log into WordPress and click on Global Options in the left-hand menu. Then click into the Header tab. To save your selection, click the Update button in the top right of your screen.

Setting Options:

  • Sticky Header: If you’d like your header to follow users down the screen as they scroll, then enable this feature.
  • Logo: Before uploading your logo, resize the file to the maximum size that it should show on your site. This will help to keep your page load time to a minimum. Remember to add alt text to this logo. Since it is part of the navigation, screen readers will use this alt text to help users navigate the site. Consider something simple like “Name of your site logo”
  • Logo Size: Set the maximum height and width for your logo to appear on desktop and mobile devices. The larger the height, the deeper your header will be. The wider your logo is, the less space you will have for the navigation. Please keep in mind that these are maximum sizes, so your logo may be shown smaller depending on the device.
  • Header Contact Us Link: Create your contact page first. When you click into this setting a pop up will appear that allows you to select the URL and add the text that will show for that page in your navigation.
  • Color Options: Click on Select Color and use the color selector tool or enter a hex code into the field. When choosing the color palette, consider the colors used on the rest of the site and make sure that your color choices meet AA accessibility standards.