> For the complete documentation index, see [llms.txt](https://broadcast.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://broadcast.presidiocreative.com/broadcast-v5/header/header/header-section.md).

# Header section

Broadcast includes multiple header styles to easily customize the look of your main header

## Logo above menu

Place the brand logo in the middle and navigation below.

The design allows for longer navigation. Stores with many menu items can place the navigation below the brand logo and position items like language selector, currency picker, account, search, and cart icons on the top right:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/jzEmCjq5Phi9lx4EG32S/Logo%20above%20menu%20bag.png" alt=""><figcaption><p>Cart icon style: Bag</p></figcaption></figure>

## Logo beside menu

This style places the brand logo to the left with the navigation in the center. The design is a more compressed header area. Ideal for smaller/shorter navigation menus:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/x8nEx1Y2xmB4HTNQXSjm/Logo%20beside%20menu%20cart.png" alt=""><figcaption><p>Cart icon style: Cart</p></figcaption></figure>

## Mobile drawer menu

This minimal 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:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/yTLsMehrkBPO6Nwnurzx/Mobile%20drawer%20menu%20circle.png" alt=""><figcaption><p>Cart icon shown as circle with number of items in cart</p></figcaption></figure>

When the menu text or icon is clicked, the slide-out mobile drawer is displayed on both desktop and mobile:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/n495quxCjKyC8fihjOxW/Drawer%20out.png" alt=""><figcaption></figcaption></figure>

The search icon is placed next to the mobile-style hamburger icon for balance. Account and cart icons are on the far right.

## Logo center, menu left

This common design presents the brand logo centered with navigation menu items on the left. Ideal for compact headers with a shorter top-level menu structure:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/tDbyeLTQbvizO9CydMDO/Logo%20center%20menu%20left.png" alt=""><figcaption><p>Cart icon style: Bag shown with items in cart indicator</p></figcaption></figure>

## Text-based items

Broadcast can replace icons with text for text-forward designs:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/HRrC0RER2YjUGsmw4q7P/text%20menu.png" alt=""><figcaption><p>Toggle off the Show icons option</p></figcaption></figure>

## Currency selector

Broadcast supports Shopify's Localization feature. A currency selector can be placed in the header:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/uML8avgWcj7q5DTPZOpD/localization.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Localization is configured in your main Shopify Admin settings.
{% endhint %}

## Language selector

Broadcast also supports Shopify's Language selector and can be placed in the header:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/IYheYxvTfSJQg1paRGmV/language.png" alt=""><figcaption><p>Language drop-down</p></figcaption></figure>

{% hint style="info" %}
Languages are configured in your main Shopify Admin settings.
{% endhint %}

## Predictive search

Broadcast includes a powerful redesigned search tool for finding products and resources within your site. Predictive search can be engaged right from the header. Addition menu options can be added to customize the shopping experience:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/LeWjk78s2Tj7x26uwjBq/search%20dropdown.png" alt=""><figcaption><p>Customize the search to help customers find common items</p></figcaption></figure>

Configure and customize the search features under Theme Settings:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/BIKd7NfgRvE0MLcNa60s/search%20settings.png" alt=""><figcaption></figcaption></figure>

## Localization, language, and search toggles

Each of these features can be individually toggled on or off to show in the main header area:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/GDN1Wht5DSakKYMuqLuz/toggles%20for%20currency%20language%20and%20search.png" alt=""><figcaption></figcaption></figure>

## Transparent header

When using a transparent header, you can experiment with different icon styles to help the icons stand out with your background image.

A large icon size sometimes helps to bring attention to the icons:

![Icon style: Modern](https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/ZPBdmfJySt8lcCbOzFaz/transparent-header-icons.png)

Find the transparent header options lower in the Header section settings:

![Icon style: Bold](https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/cSTE9XjJ6kzwP33a09W7/transparent-header-settings.png)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://broadcast.presidiocreative.com/broadcast-v5/header/header/header-section.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.