Header styles

Story includes several header styles and configuration options

Flexible layout options allow you to easily configure your brand logo, menu items, and links.

Example layouts with logo in the middle or left-side

Adding an optional toolbar block on top provides additional options to hold language and currency drop-downs, also additional navigation:

Using a transparent header provides even more design options. Explore with the Header settings to find additional flexible layouts and icon options.

Mobile devices will be served with the Mobile drawer menu version.

Logo above menu

Places the brand logo centered and above the navigation. Allows space on the left for social icons. Cart and optional search and account icons are placed on the right-side:

Example with transparent header setting on

Tip: Ideal when using a larger top-level navigation menu

Logo beside menu

Moves the brand logo to the left side. This option provides a more compact header as all items are placed in one row. When the logo is placed above the menu, two rows are used and additional space is required. Logo beside menu is a good option when your top-level navigation is compact:

Social icons are not displayed with this menu style.

Mobile drawer menu

Adapted from the popularity of mobile design, this option provides the most compact and minimal header style. This style is also consistent between both desktop and mobile devices. Animations are used to make the experience fluid:

Minimal design with easy access to all menu options

Social icons are placed at the bottom of the menu drawer.

How to setup

Click on the Header section to view all settings and options. Header styles appear first in the setting options:

Experiment with icon toggles, transparent header, and sticky header options to find the right header design for your brand.