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


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/pages/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.