Headers

Headers

There are three Header section types:

  • Centered
  • Left Aligned
  • Full Width

The first two types include variations with navigation components:

  • with Basic Menu
  • with Hamburger Menu (interactive)
NOTE: the Hamburger menu icon cannot be made editable in any of the template integrations we provide. If you want to customize the icon, make sure you do that manually in the code.

Centered Header

The Centered Header shows a center-aligned logo, on both desktop and mobile.

The one with the Hamburger menu component contains an image that is visible only on mobile, and works like a dropdown menu - find out more in the framework Navigation docs.

Example

Header centered

Left Aligned Header

The Left Aligned Header shows the logo on the left, and a navigation component on the right.
Like the Centered one, it comes with both a Basic and a Hamburger menu.

On mobile, the logo image and menu are set to stack and align to center.

Example

Header left

Full Width Header

The Full Width Header sits outside of the main content wrapper, in its own wrapper table - more on wrapper tables in the framework docs.
It has a centered logo and a background colour, which you can customise to suit your needs.

Example

Header full width

Customisation

You can easily change the looks of a header by changing its background, text, spacing, and logo image.

  • Background colour — change the HEX colour inside the bgcolor="" on the wrapping row table
  • Links — adjust colour, text alignment, and side spacing with inline CSS
  • Logo image — change the path in the src="" attribute, and don't forget to adjust the dimensions
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td>
NOTE: if using more than two columns inside the spacer, you need to adjust the colspan="2" attribute value on the spacers. If you use a single column, you can remove this attribute. Find out more in the framework Spacer docs.