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.

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

This style places the brand logo to the left with the navigation in the center. Account, search, and cart icons are placed to the right of the navigation:

This style places the brand logo to the left, and adds spacing to push the navigation on the right next to the cart:

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

How to

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

Customize the style using search and icon checkbox options:

Toubleshooting large menus showing mobile mode

Certain conditions can lead to the mobile menu showing instead of the desktop menu. 1) Too many items in the menu will force the mobile menu to show. This depends on the size of the screen and the number of menu items. It would also include the length of the menu items. Viewing the theme inside the theme editor can also result in this issue since the theme editor sidebars reduce the page width. Reducing the text length or the number of top-level menu items can help. 2) Another issue may be the type of device. If the device is a touch device - then we may show the mobile menu. The mobile menu is more suitable for touch devices. For example, using a 2 in 1 device can lead to this issue even in desktop mode

Examples

Additional examples combining layout and icons or text:

PreviousHeader NextIcon styles

Last updated 1 year ago

Header styles

Menu | Logo | Cart

Logo | Menu | Cart

Logo | Spacer | Menu + Cart

Mobile drawer menu

How to

Toubleshooting large menus showing mobile mode

Examples