# 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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fq2y5P6emqaXvvxQZpWYT%2Fheader.jpeg?alt=media\&token=8e699a5f-7a9f-4f90-a651-633cd47b4437)

## Set up main menu

***

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](https://help.fluorescent.co/stiletto/pages/header/mega-navigation).
{% 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**.

### Highlight featured link <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](https://help.fluorescent.co/stiletto/general/theme-updates) to access new features.
{% endhint %}

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FB0PAWGrCjf4WWDnHDJgF%2Fheader-featured-link.png?alt=media&#x26;token=838ea7d6-6cd7-4f51-8023-ef5a62ec343b" alt=""><figcaption></figcaption></figure>

## Show secondary menu

***

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.

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

{% hint style="info" %}
Use the secondary menu for links to pages about your store, contact info, and special promotions.
{% endhint %}

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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-248be4ca03964d4039b76b31e950ef8c4c7393e1%2Fheader-secondary.jpeg?alt=media)

## Mobile menu

***

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="mobile-menu#add-mobile-menu-images">#add-mobile-menu-images</a></td></tr></tbody></table>

## Layout and style

***

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="layout-and-style#change-header-colors">#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="layout-and-style#choose-header-layout">#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="header/logo">logo</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="header/transparent-header">transparent-header</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="layout-and-style#enable-sticky-header">#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="layout-and-style#change-cart-icon">#change-cart-icon</a></td></tr></tbody></table>

## Quick search

***

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="quick-search#product-results-style">#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="quick-search#promotion-links">#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="quick-search#searchable-fields">#searchable-fields</a></td></tr></tbody></table>

## Language and country selectors

***

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

## Social media icons

***

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://`**.

## Customer account icon

***

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](https://help.fluorescent.co/stiletto/pages/header/logo)\
> [Mega navigation](https://help.fluorescent.co/stiletto/pages/header/mega-navigation)\
> [Transparent header](https://help.fluorescent.co/stiletto/pages/header/transparent-header)\
> [Quick search](https://help.fluorescent.co/stiletto/pages/header/quick-search)