> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt
> Use this file to discover all available pages before exploring further.

# Header Features

> Configure the Horizon header with flexible layouts, transparency options, and sticky behavior

The Horizon header is a highly customizable component that supports multiple layouts, transparent overlays, sticky positioning, and responsive behavior.

## Key Features

* **Flexible Positioning**: Position logo, menu, search, and localization in custom layouts
* **Transparent Header**: Support for transparent headers on home, product, and collection pages
* **Sticky Header**: Choose between always sticky, scroll-up sticky, or never sticky
* **Two-Row Layout**: Split header elements across top and bottom rows
* **Mobile Navigation Bar**: Optional horizontal scrolling navigation for mobile
* **Mega Menu Support**: Rich dropdown menus with images, products, and collections

## Header Configuration

### Layout Settings

The header uses a three-column grid system (left, center, right) that you can configure:

```liquid theme={null}
{% liquid
  assign order = 'logo,menu,localization,search,drawer_search,actions'
  
  if shop.customer_accounts_enabled
    assign order = 'drawer_search,logo,menu,localization,search,actions'
  endif
%}
```

<Tabs>
  <Tab title="Logo Position">
    Configure where the logo appears in the header:

    **Options:**

    * `left` - Logo on the left side
    * `center` - Logo in the center (default)
    * `right` - Logo on the right side

    **Setting ID:** `logo_position`
  </Tab>

  <Tab title="Menu Position">
    Choose menu placement:

    **Options:**

    * `left` - Menu on left (default)
    * `center` - Menu in center
    * `right` - Menu on right

    **Setting ID:** `menu_position`
  </Tab>

  <Tab title="Search Position">
    Position the search icon:

    **Options:**

    * `left` - Search on left
    * `right` - Search on right (default)

    **Setting ID:** `search_position`
  </Tab>
</Tabs>

### Two-Row Header

Split header elements across two rows for more layout flexibility:

```liquid theme={null}
{% assign rows = 'top,bottom' | split: ',' %}
{% for row in rows %}
  <div class="header__row header__row--{{ row }} color-{{ section.settings.color_scheme }}">
    {% render 'header-row',
      row: row,
      order: order,
      settings: section.settings
    %}
  </div>
{% endfor %}
```

**Row Options:**

* `menu_row`: Place menu in `top` or `bottom` row
* `search_row`: Place search in `top` or `bottom` row
* `localization_row`: Place language/country selector in `top` or `bottom` row

### Transparent Header

Enable transparent headers that overlay page content:

```liquid theme={null}
{% if section.settings.enable_transparent_header_home and template.name == 'index' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.home_color_scheme
{% elsif section.settings.enable_transparent_header_product and template.name == 'product' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.product_color_scheme
{% elsif section.settings.enable_transparent_header_collection and template.name == 'collection' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.collection_color_scheme
{% endif %}
```

<Tabs>
  <Tab title="Home Page">
    **Settings:**

    * `enable_transparent_header_home` - Enable transparency on homepage
    * `home_color_scheme` - Choose `default` or `inverse` color scheme
  </Tab>

  <Tab title="Product Page">
    **Settings:**

    * `enable_transparent_header_product` - Enable on product pages
    * `product_color_scheme` - Color scheme option
  </Tab>

  <Tab title="Collection Page">
    **Settings:**

    * `enable_transparent_header_collection` - Enable on collection pages
    * `collection_color_scheme` - Color scheme option
  </Tab>
</Tabs>

<Note>
  When both transparent and sticky headers are enabled, transparency is disabled when the header becomes sticky.
</Note>

### Sticky Header

Control when the header sticks to the top of the viewport:

```liquid theme={null}
{% if section.settings.enable_sticky_header == 'always' %}
  assign sticky = 'always'
{% elsif section.settings.enable_sticky_header == 'scroll-up' %}
  assign sticky = 'scroll-up'
{% endif %}
```

**Options (`enable_sticky_header`):**

* `always` - Header always stays at top (default)
* `scroll-up` - Header appears when scrolling up
* `never` - Header scrolls normally

<CodeGroup>
  ```liquid Always Sticky theme={null}
  <header-component
    sticky="always"
    data-sticky-state="active"
  >
  ```

  ```liquid Scroll-Up Sticky theme={null}
  <header-component
    sticky="scroll-up"
    data-scroll-direction="up"
  >
  ```
</CodeGroup>

## Header Actions

The header actions include search, cart, and account icons.

### Action Display Styles

Choose between icon or text display:

```liquid theme={null}
{% capture actions %}
  {% render 'header-actions',
    customer_account_menu: section.settings.customer_account_menu,
    display_style: section.settings.actions_display_style,
    section: section
  %}
{% endcapture %}
```

**Settings:**

* `actions_display_style`: `icon` or `text`
* `actions_font_size`: 12px to 18px (when using text)
* `actions_font`: Choose font family
* `actions_text_case`: `none` or `uppercase`

## Localization

Display language and country/currency selectors:

```liquid theme={null}
{% assign show_language = section.settings.show_language %}
{% if localization.available_languages.size <= 1 %}
  {% assign show_language = false %}
{% endif %}

{% assign show_country = section.settings.show_country %}
{% if localization.available_countries.size <= 1 %}
  {% assign show_country = false %}
{% endif %}
```

### Localization Settings

<Tabs>
  <Tab title="Country/Currency">
    **Settings:**

    * `show_country` - Display country/currency selector
    * `country_selector_style` - Show flag icon

    **Code:**

    ```liquid theme={null}
    {% if show_country %}
      {% if section.settings.country_selector_style == true %}
        <span class="icon-flag" style="
          background-image: url({{ localization.country | image_url: width: 32 }});
        "></span>
      {% endif %}
      <span class="currency-code">
        {{ localization.country.currency.iso_code }}
      </span>
    {% endif %}
    ```
  </Tab>

  <Tab title="Language">
    **Settings:**

    * `show_language` - Display language selector

    **Code:**

    ```liquid theme={null}
    {% if show_language %}
      <span>
        {{ localization.language.iso_code | upcase }}
      </span>
    {% endif %}
    ```
  </Tab>

  <Tab title="Typography">
    **Font Settings:**

    * `localization_font`: `heading`, `subheading`, `body`, or `accent`
    * `localization_font_size`: 10px to 18px
    * `localization_position`: `left` or `right`
  </Tab>
</Tabs>

## Appearance Settings

### Section Dimensions

```yaml theme={null}
section_width:
  - page-width
  - full-width

section_height:
  - compact (smaller padding)
  - standard (default padding)
```

### Borders and Dividers

**Bottom Border:**

```liquid theme={null}
style="--border-bottom-width: {{ section.settings.border_width }}px;"
```

* `border_width`: 0-5px, 0.5px increments

**Row Divider (when using two rows):**

* `divider_width`: Thickness between top and bottom rows (0-5px)
* `divider_size`: `page-width` or `full-width`

### Color Schemes

```liquid theme={null}
color_scheme_top: Color scheme for top row
color_scheme_bottom: Color scheme for bottom row (when using two rows)
color_scheme_transparent: Inverse color scheme for transparent state
```

## Mobile Behavior

On mobile devices (\< 750px), the header automatically switches to a drawer menu:

```liquid theme={null}
{% capture drawer_menu %}
  {% content_for 'block',
    type: '_header-menu',
    id: 'header-menu',
    variant: 'mobile'
  %}
{% endcapture %}
```

### Mobile Grid Layout

The mobile header uses a 5-column grid:

```css theme={null}
grid-template-columns:
  var(--header-mobile-bookend)  /* leftA: menu icon */
  var(--header-mobile-bookend)  /* leftB: search */
  1fr                           /* center: logo */
  var(--header-mobile-bookend)  /* rightA: search/account */
  var(--header-mobile-bookend)  /* rightB: cart */
```

<Warning>
  The mobile layout automatically reorganizes elements. Custom positioning settings may not apply on mobile.
</Warning>

## Schema Settings

<Accordion title="Complete Settings List">
  ```json theme={null}
  {
    "logo_position": "center",
    "menu_position": "left",
    "menu_row": "top",
    "customer_account_menu": "customer-account-main-menu",
    "show_search": true,
    "search_position": "right",
    "search_row": "top",
    "show_country": true,
    "country_selector_style": true,
    "show_language": true,
    "localization_font": "heading",
    "localization_font_size": "1rem",
    "localization_position": "right",
    "localization_row": "top",
    "section_width": "page-width",
    "section_height": "standard",
    "enable_sticky_header": "always",
    "divider_width": 0,
    "border_width": 0,
    "actions_display_style": "icon",
    "color_scheme_top": "primary",
    "enable_transparent_header_home": false,
    "enable_transparent_header_product": false,
    "enable_transparent_header_collection": false
  }
  ```
</Accordion>

## JavaScript API

The header component is loaded at `header.js` and provides:

```javascript theme={null}
import { hydrate } from '@theme/section-hydration';
const url = new URL(window.location.href);
url.searchParams.delete('page');
hydrate('{{ section.id }}', url);
```

### Custom Events

The header responds to scroll events and manages:

* Sticky state transitions
* Transparent to solid color transitions
* Submenu height calculations
* Mobile drawer state

## Related Components

* [Navigation](/features/navigation) - Menu and mega menu configuration
* [Search](/features/search) - Search modal and predictive search