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.

Preset - Menu | Logo | Cart

Preset - Logo | Menu | Cart

Preset - Logo | Spacer | Menu + Cart

Preset - Mobile drawer menu

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:

---

Logo | Menu | Cart

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:

---

Logo | Spacer | Menu + Cart

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

---

Mobile drawer menu

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:

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

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:

Menu | Logo | Cart, using icons option

Logo | Spacer | Menu + Cart