> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/header.md).

# Header

The **Header** appears at the top of each page to allow visitors to navigate your store with ease.

* Display a **main menu** and **secondary menu** with navigation links
* Add **mega menus** to display large dropdowns with multiple columns
* Change the header **layout and style**
* Customize the **Quick search** style and results

![](/files/1K7HP6CyXpGioBytG19O)

<h2 align="center">Set up main menu</h2>

***

The Header displays menu links from the **Navigation** settings of your Shopify Admin. Use the header's main menu to show your collection and product links.

By default, multiple levels of nested links will appear as dropdown menus.

{% hint style="info" %}
If you have menus with three levels of nested links, you can display the links in multiple columns by adding a [Mega navigation menu](/stiletto/pages/header/mega-navigation.md).
{% endhint %}

By default, the header displays the **Main menu.** You can create a different menu, then change the selected menu in the **Header** section settings.

> 1. Click the **Header section** to open the settings.
> 2. Under navigation, click **Select menu** for the main menu.
> 3. Choose your menu of links that you've made in your Shopify admin.
> 4. Click **Save**.

### <mark style="color:$primary;">Highlight featured link</mark> <a href="#enable-featured-link" id="enable-featured-link"></a>

Highlight a top-level menu item with a custom color. Click the **Header** section and enter the name of the menu link in the **Featured link label** field. The featured link appears on both desktop and mobile.

{% hint style="info" %}
This feature is available in v3.4.0 — Learn how to [update your theme](/stiletto/general/theme-updates.md) to access new features.
{% endhint %}

<figure><img src="/files/SZbpkXxOh1oTvdKZWiJ6" alt="" width="563"><figcaption></figcaption></figure>

### <mark style="color:$primary;">Show secondary menu</mark>

{% columns %}
{% column %}
Display a **secondary menu** of links in the top-left of the header. This menu shows top-level links in a single row — it does not show dropdown secondary links.

Use the secondary menu for links to pages about your store, contact info, and special promotions.

Start by creating a new menu of top-level links in the **Navigation** settings of your Shopify admin.
{% endcolumn %}

{% column %}

> 1. Click the **Header section** to open the settings.
> 2. Under navigation, click **Select menu** for the secondary menu.
> 3. Choose your menu of links that you've made in your Shopify admin.
> 4. Click **Save**.
>    {% endcolumn %}
>    {% endcolumns %}

<img src="/files/tvceBsfT5v0jGSeX068h" alt="" width="563">

<h2 align="center"></h2>

<h2 align="center">Mobile menu</h2>

***

The mobile menu uses settings in the Header section. You can also display mobile menu images.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Mobile menu images</strong></mark></td><td>Display images next to collection and product links in the mobile menu.</td><td><a href="/pages/HG6GWFI9D6sZhtw7zXPf#add-mobile-menu-images">/pages/HG6GWFI9D6sZhtw7zXPf#add-mobile-menu-images</a></td></tr></tbody></table>

<h2 align="center">Layout and style</h2>

***

Click the **Header** section to customize its appearance.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Colors</strong></mark></td><td>Change the text and background colors.</td><td><a href="/pages/fKRh5QMB2ydDHdc800vF#change-header-colors">/pages/fKRh5QMB2ydDHdc800vF#change-header-colors</a></td></tr><tr><td><mark style="color:blue;"><strong>Layout</strong></mark></td><td>Rearrange the elements of the header.</td><td><a href="/pages/fKRh5QMB2ydDHdc800vF#choose-header-layout">/pages/fKRh5QMB2ydDHdc800vF#choose-header-layout</a></td></tr><tr><td><mark style="color:blue;"><strong>Logo</strong></mark></td><td>Replace the store name with an image.</td><td><a href="/pages/ULuq8cOHZtvlE8eLZ7xy">/pages/ULuq8cOHZtvlE8eLZ7xy</a></td></tr><tr><td><mark style="color:blue;"><strong>Transparent header</strong></mark></td><td>Make the header background transparent.</td><td><a href="/pages/uc80HLpmw7oiX9A96rdN">/pages/uc80HLpmw7oiX9A96rdN</a></td></tr><tr><td><mark style="color:blue;"><strong>Sticky header</strong></mark></td><td>Fix the header to the top of the screen.</td><td><a href="/pages/fKRh5QMB2ydDHdc800vF#enable-sticky-header">/pages/fKRh5QMB2ydDHdc800vF#enable-sticky-header</a></td></tr><tr><td><mark style="color:blue;"><strong>Cart icon</strong></mark></td><td>Change the icon for the cart.</td><td><a href="/pages/fKRh5QMB2ydDHdc800vF#change-cart-icon">/pages/fKRh5QMB2ydDHdc800vF#change-cart-icon</a></td></tr></tbody></table>

<h2 align="center">Quick search</h2>

***

Change the search result styles and add suggested links.

{% hint style="success" %}
You can customize search results with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Create custom filters, select result types, and add "synonym groups" for relevant results. Learn more in Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery).
{% endhint %}

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Product results style</strong></mark></td><td>Allow visitors to view your store in another language that you've added.</td><td><a href="/pages/l2Yx1EpvXFLfZHcRvr8J#product-results-style">/pages/l2Yx1EpvXFLfZHcRvr8J#product-results-style</a></td></tr><tr><td><mark style="color:blue;"><strong>Promotion links</strong></mark></td><td>Allow visitors to select their preferred region and currency.</td><td><a href="/pages/l2Yx1EpvXFLfZHcRvr8J#promotion-links">/pages/l2Yx1EpvXFLfZHcRvr8J#promotion-links</a></td></tr><tr><td><mark style="color:blue;"><strong>Searchable fields</strong></mark></td><td>Limit the scope of search by selecting searchable areas of your store.</td><td><a href="/pages/l2Yx1EpvXFLfZHcRvr8J#searchable-fields">/pages/l2Yx1EpvXFLfZHcRvr8J#searchable-fields</a></td></tr></tbody></table>

<h2 align="center">Language and country selectors</h2>

***

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Language selector</strong></mark></td><td>Allow visitors to view your store in another language that you've added.</td><td></td></tr><tr><td><mark style="color:blue;"><strong>Country selector</strong></mark></td><td>Allow visitors to select their preferred region and currency.</td><td></td></tr></tbody></table>

<h2 align="center">Social media icons</h2>

***

Choose to **Show social media** icons at the top of the header on desktop and in the mobile menu.

Add your social media links in **Theme settings > Social media** to automatically display those social icons. Enter the full URL, including **`https://`**.

<h2 align="center">Customer account icon</h2>

***

The customer account icon appears by default when customer accounts are enabled in your Shopify admin.

Go to your admin **Settings > Customer accounts** to find the **Show login link in the header of online store and at checkout** option.

{% hint style="success" %}
Customer accounts is a Shopify feature. Our theme support cannot provide code customizations to remove the customer icon. See Shopify's [Customer accounts](https://help.shopify.com/en/manual/customers/customer-accounts) manual to learn more.
{% endhint %}

***

> **Related links**
>
> [Logo image](/stiletto/pages/header/logo.md)\
> [Mega navigation](/stiletto/pages/header/mega-navigation.md)\
> [Transparent header](/stiletto/pages/header/transparent-header.md)\
> [Quick search](/stiletto/pages/header/quick-search.md)