# Header styles

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

<div data-full-width="false"><figure><img src="/files/oQgv4UKCdbpHrWl3MUmn" alt=""><figcaption><p><strong>Preset - Menu | Logo | Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/HCJPQoptHdcu2UaDj7Ls" alt=""><figcaption><p><strong>Preset - Logo | Menu | Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/2ejY4ADO3K3HdGMuqy8N" alt=""><figcaption><p><strong>Preset - Logo | Spacer | Menu + Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/L8grLUPDLsLNFKED4N4w" alt=""><figcaption><p><strong>Preset - Mobile drawer menu</strong></p></figcaption></figure></div>

## 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:

<div data-full-width="false"><figure><img src="/files/7dJkHtgicykQKAAxUSbk" alt=""><figcaption></figcaption></figure></div>

***

## 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:

![](/files/ALrbNoPchPNGW9udXkWj)

***

## 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:

<figure><img src="/files/sL62J1V02qSrFEFoGBHW" alt=""><figcaption></figcaption></figure>

***

## 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 ](/files/-MibPDJ_k7pIzvzyD848)

## How to

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

![](/files/-MibIzUq9_Tch6v1ZXTb)

Customize the style using search and icon checkbox options:

![Cart, Search and Account can be displayed as icons](/files/-MibJ67HDgGkqKoBYQHV)

## 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:

<div data-full-width="true"><img src="/files/-MibQXWPnE8-P6Ti0-e5" alt="Menu | Logo | Cart, using icons option"></div>

<div data-full-width="true"><img src="/files/-Me76YUVWfaQ1WrBLuKN" alt="Logo | Spacer | Menu + Cart"></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pipeline.groupthought.com/header/header/header-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.