How to use a header bar block in an email

How to use a header bar block in an email

Estimated 3 minute read

Updated Sep 19, 2025, 12:00 AM EST

Table of contents

You will learn
About header bar blocks
Add a header bar block to an email
Header bar block inbox considerations
Additional resources

You will learn

Learn about header bar blocks, which are used to add a logo, key links, and other information to the top of your emails.

About header bar blocks

Header bar blocks can contain a logo and any links you want to highlight. Consider including some of the following links in your header bar:

Home
About us
Shop now
New
Best sellers
Sale
FAQ
Returns & exchanges (in order follow-up emails)

Be judicious when adding links; including too many can make your email look crowded and hard to navigate.

Header bar block format options

You can choose different arrangements of the buttons and logo for desktop and mobile:

Desktop layout options
Logo stacked
Logo inline
Logo centered
Links and buttons only

Mobile layout options
Stack all
Logo stacked
Logo inline
Links and buttons only
Stacked links and buttons only

If you select Links and buttons only for Desktop layout, the logo is removed from the block. Mobile layout is then limited to Links and buttons only or Stacked links and buttons only.

Using a stacked format on mobile can make your buttons easier to read and click, as mobile screens are much smaller.

Add a header bar block to an email

Within an email template, drag a Header bar block into the canvas.

Select the header bar block, then choose Desktop layout and Mobile layout in its Styles tab.
If your desktop layout includes a logo, review Logo image under Desktop layout. A logo set in your email defaults under Content > Media & brand > Defaults is pre-filled. Use Logo image to add or replace it for this email.
Use the dropdown arrow icon to see each link’s details and edit its link text and URL.

To save space on mobile, consider selecting Desktop only for any non-essential links.

Use the Add link or Add image buttons to add additional links or content. Expand each new item to enter its link text and URL or select its image.

Use the settings below the Content section to style the link text, including fonts, colors, and padding.

Save a header bar for use in future emails

Most emails you send should include a header bar. To save a header bar block as universal content for reuse in future emails:

Click the star icon next to the header bar block.

In the Create universal content window, enter a name in Universal content name.
Click Create.

Learn more about universal and saved content.

Header bar block inbox considerations

Depending on the recipient’s inbox, the header bar (or email as a whole) may appear with slight differences. To see how your email will appear in different inboxes, consider using a tool like Email on Acid.

Header bar blocks and Gmail clipping

Header bar blocks are code-heavy, which means they increase the overall code weight of your email. In messages that contain a large amount of other content, this could lead to Gmail clipping.

If your message is at risk of clipping, consider using an image block for your logo, followed by a table block with your links.

Header bar blocks and Microsoft Outlook

Due to Outlook’s unique HTML rendering engines, a border may be added to your header bar elements for recipients using Outlook.

To avoid this, create a header using an image block for your logo and a table for your links.

Additional resources

How to use a text block in an email

Learn how to use text blocks in Klaviyo’s email template editor, including how to style them, add personalization tags, and use AI to draft and revise your copy. - How to update your brand styles in Klaviyo

Learn what to update in Klaviyo when rebranding or refreshing your brand’s design.

Was this article helpful?

YesNo

Use this form only for article feedback. Learn how to contact support.