# Header styles

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

![Example layouts with logo in the middle or left-side](/files/0ww52pWPtfmMnXWBCCHt)

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

![](/files/OsDP1wuPA5KomQRu3JMu)

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

{% hint style="success" %}
Mobile devices will be served with the Mobile drawer menu version.
{% endhint %}

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

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

![](/files/Ab3aUickSUj8QTtqWoB4)

Social icons are not displayed with this menu style.&#x20;

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

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:

![](/files/ZO2ntTM9aNFmjATLdm4L)

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


---

# 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://story.groupthought.com/story-v2/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.