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

# Header & navigation

> Set up your logo, menus, announcement bar, and sticky header

The header is the first thing customers see. Open the theme editor and click on the **Header** section to configure it.

## Logo

| Setting                     | Options                                          |
| --------------------------- | ------------------------------------------------ |
| **Logo image**              | Upload your logo                                 |
| **Logo width**              | 50–300px (default 100px)                         |
| **Logo position (desktop)** | Top left, top center, middle left, middle center |
| **Logo position (mobile)**  | Center or left                                   |

<Tip>
  Upload your logo as a transparent PNG or SVG for the best result. Set the width so it looks balanced with your menu items.
</Tip>

## Navigation menu

Select which menu to display via the **Menu** setting (defaults to `main-menu`). You manage the menu links in Shopify admin under **Online Store → Navigation**.

### Menu type (desktop)

| Type          | Best for                                                                       |
| ------------- | ------------------------------------------------------------------------------ |
| **Dropdown**  | Simple stores with a few categories. Menu items show a dropdown on hover.      |
| **Mega menu** | Stores with many categories. Opens a full-width panel with columns and images. |
| **Drawer**    | Minimal designs. Opens a side drawer for navigation.                           |

## Sticky header

Controls what happens to the header when customers scroll down:

| Option               | Behavior                                              |
| -------------------- | ----------------------------------------------------- |
| **None**             | Header scrolls away with the page                     |
| **On scroll up**     | Header reappears when scrolling back up               |
| **Always**           | Header stays fixed at the top                         |
| **Reduce logo size** | Header stays fixed but the logo shrinks to save space |

## Announcement bar

The announcement bar sits above the header. Use it for:

* Sale promotions ("HOLIDAY SALE ENDS IN 02:47:33")
* Free shipping thresholds ("Free shipping on orders over \$50")
* New product launches

You can configure:

* **Text content** and link
* **Background and text colors**
* **Countdown timer** — set an end date for urgency
* **Multiple messages** — rotate between announcements

## Header styling

| Setting                 | What it does                                                           |
| ----------------------- | ---------------------------------------------------------------------- |
| **Full width**          | Extend header to full browser width                                    |
| **Show line separator** | Border below the header                                                |
| **Top border**          | Decorative border with style (solid, dashed, dotted, double) and color |
| **Menu underline**      | Thickness and color of the hover/active underline on menu items        |
| **Margin bottom**       | Space between the header and page content                              |

## Utility icons

Toggle these elements on/off in the header:

| Element               | What it does                                         |
| --------------------- | ---------------------------------------------------- |
| **Country selector**  | Currency/country picker for international stores     |
| **Language selector** | Language switcher (uses your installed translations) |
| **Customer avatar**   | Account icon for login/register                      |
| **Cart icon**         | Shopping cart with item count badge                  |