Set up a desktop header layout ​

This guide describes setting up a header layout for desktop display devices.

Use Exhibit's flexible, desktop header layout to add and reorder blocks, and specify a width for blocks inside the Header section.

Anatomy of the header section on desktop ​

The previous image shows a Header section that contains the following areas:

1. Logo.
2. Blocks, like the Menu or Rich text block.
3. Utility links, like the Cart or Menu button link.

Columns ​

The Header section's layout is based on a twelve column grid. Each header area occupies space inside the header that's equivalent to a number of columns.

For example, the previous image shows a Header section. A red color indicates each column inside the Header section, with the following configuration:

• On the left side, the Logo area occupies 2 of the Header's 12 columns.
• The Menu block, in the center, uses 8 columns.
• On the right side, the Utility links area occupies 2 columns.

You can specify a width for each content area and block inside the Header section. The width options for the header are described in the following table. In Theme editor, access the width options from the Header section menu or from the corresponding block menu.

Adjust the width of logo and utility links areas ​

The Header section's Layout menu provides dropdown options for setting the width of the Logo and Utility links areas in Theme editor.

To use the dropdown options to adjust the width of the Logo and Utility links areas inside the Header section, refer to Set up a header section.

The following image shows the Header section's Layout menu in Theme editor.

Customize block widths ​

The blocks inside the Header section's provide dropdown options for setting the width the block. By default, the block width is set to Fill remaining space.

The following image shows the dropdown options for setting the width of a Vertical menu block, inside the Header section, in Theme editor.

To use the dropdown options to adjust the width of a block inside the Header section, refer to Configure a block within a Header section.

Add spacer blocks ​

You can add a Spacer block into the Header. A Spacer block does not add visible content into the Header section. Instead, a Spacer block displays an area of empty or "white" space inside the section.

Use Spacer blocks to add empty space between elements, to create a custom Header layout. A Spacer block's width can be set One twelfth (1/12) to occupy 1 of the 12 columns inside the Header section.

To add a Spacer block into the Header section, refer to Configure a block within a Header section.

Show layout grid guidelines in Theme editor ​

To assist you with customizing the Header layout and setting up block widths, you can show grid lines inside the Header section in Theme editor.

To display enable grid lines:

1. Select the Header section in Theme editor.

2. In the section menu, enable the checkbox option to Show layout grid guidelines.

   With this option enabled, Theme editor displays the Header section's 12 columns with a border around each header area and block.

Example header layouts ​

The following images show example Header section layouts. A list of the Theme settings used to create each example is provided with each image.

Header layout example 1 ​

Header layout example 2 ​