Header styles

Pipeline includes several header styles and configuration options

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

Example of style layouts with text or icon cart link options

Menu | Logo | Cart

This style places the brand logo in the middle with navigation on the left and account, search and cart on the right:

Text version of Search and Cart on the right

Logo | Menu | Cart

This style places the brand logo to the left with the navigation in the center:

Use Icons option checked for cart icon

Account, search and cart icons are placed to the right of the navigation

Logo | Spacer | Menu + Cart

This style places the brand logo to the left with the navigation on the right next to the cart:

Account and Search are placed left of Cart

Mobile drawer menu

This style adopts the mobile design pattern which is used on all mobile devices. This style is the cleanest option, hiding the navigation into a mobile style drawer and keeps consistency between mobile and desktop:

Navigation slides out when opened

How to:

Choose a layout option from the Header style drop-down:

Customize the style using search and icon checkbox options:

Cart, Search and Account can be displayed as icons

Examples

Additional examples combining layout and icons or text:

Menu | Logo | Cart, using icons option
Logo | Spacer | Menu + Cart