Headers

The place for brand logos and menus

Our email templates come with multiple Header section types:

  • Centered Logo
  • Centered With Split Menu
  • Left/Right Aligned with Menu
  • Left/Right Aligned With Title
  • Full Width

Most of them 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


Centered With Split Menu

This type of Header allows adding menu links on both sides of a centered logo.

Example

Header centered split menu

Left/Right Aligned Header

The Left or Right Aligned Headers show the logo on the left or right, and a navigation component on the opposite side.
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


Left/Right With Title

This type of Header includes a logo on one side and a title+subtitle on the other side.

Example

Header with title and subtitle

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 spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section
NOTE: if customising a header to have more than the original number of columns, you need to adjust the colspan="" attribute value on its top and bottom spacers. The numeric value there must match the new number of columns that you're using. If your customisation uses a single column, you can remove this attribute.

Next Up: HERO →