Change the header layout – Help Center

You can choose between different header layouts for your website. Find the one that best fits your needs and change the look and feel of your website, for example by prominently showing your logo or website name.

Skip to:

How to change the header layout
The different header layouts

How to change the header layout

In the sidebar of your cockpit, navigate to Editor.
In the bottom bar, select .
Select the tab .
Choose the header layout that best fits your needs. You can hover with your mouse over a header layout or select its visual to learn more about its alignment and properties. Furthermore, you can see a preview of the header on the page in the background as soon as you select a header layout. You can hold down in the upper right corner of the header layout overlay and move it to see different parts of the page in the background.
Once you've decided on a header layout, select Save.

The different header layouts

In all headers, the USPs and/or announcement bar (if set) will be shown at the very top of your website. Furthermore, the shopping cart (if enabled) and the icon for the customer login will always be displayed in the upper right corner.

Of course, you don't need to worry about responsiveness. Your header will always be displayed in a version that is optimized for the device used by a visitor. Note that this also means that the header might look slightly different on smaller devices.

You are unsure which header layout best fits your business? Let's have a closer look at the different headers and their layouts. For most header layouts, you can choose between two menu types. For further information, refer to Pick a menu type.

Note

Be aware that your logo settings can affect your selected header layout. You can adjust the logo alignment in the respective logo settings.

Info

It's up to you if you would like to show your logo or your website name in the header. Read our article Upload a logo for more information.

Option 1

Header_Option 1.png

General	Brand	Menu	Search
The search icon, the logo/name and the main menu are displayed on one line.	The logo/name is centered and displayed between the menu and the search icon.	To the very left, the visitor can select to open the menu. This header layout only offers this menu type.	To the right, visitors can select a search icon to open the search bar.

With this narrow header, you can display your logo/name, menu, and search icon in one line.

As the menu is folded, the focus of this layout is on your brand. Furthermore, the folded menu is a good choice for large menu structures, as it is only visible when selected and thus allows your visitors to focus on your website content without being overwhelmed by a large number of menu items.

Option 2

Header_Option 5.png

General	Brand	Search
The logo/name, the main menu, and the search icon are displayed on one line.	The logo/name is displayed on the very left.	To the right, the visitor can select a search icon to open the search bar.

As this narrow header displays the main menu very prominently, it is recommended for small menu structures. Using this layout for structures with a large number of items in the main menu might overwhelm your visitors and make your header look cluttered.

Option 3

Header_Option 3.png

General	Brand	Search
The logo/name and the search icon are displayed on one line. The main menu is displayed on a separate line below.	The logo/name is centered.	To the right, the visitor can select a search icon to open the search bar.

With this header layout, you can highlight your logo and menu.

As the main menu is displayed on a separate line, this layout is suitable for small, medium and large menu structures. For very large menu structures, option 1 is more suitable, as displaying a large number of main menu items prominently might overwhelm your visitors and make your header look cluttered.

Option 4

Header_Option 4.png

General	Brand	Search
The logo/name and the search bar are displayed on one line. The main menu is displayed on a separate line below.	The logo/name is displayed on the very left.	The search bar is displayed on the right.

This left-aligned header provides an extended search field, highlighting your brand and the search functionality. This might be helpful if you offer a large product range, so your visitors can easily access the search functionality to find what they are looking for.

As the main menu is displayed on a separate line, this layout is suitable for small, medium, and large menu structures. For very large menu structures, option 1 is more suitable, as displaying a large number of main menu items prominently might overwhelm your visitors and make your header look cluttered.

Option 5

Header_Option 2.png

General	Brand	Search
The search bar, the logo/name and the main menu are each displayed on a dedicated line.	The logo/name is displayed on the very left. It is positioned below the search bar but above the menu.	The search bar is displayed at the top left.

This wide header highlights your brand as it prominently shows the logo area. It also highlights the search functionality. This might be helpful if you offer a large product range, so your visitors can can easily access the search functionality to find what they are looking for.