> 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/spark/header/header/layout-and-style.md).

# Layout and style

Header

Match the look of your brand by changing the style and layout of your **Header** menu and store title. Change the position of your menu links or display them in a drawer menu that can be opened by clicking a *Menu icon* (☰).

### **Inline links**

On desktop devices with **Inline links** enabled, Spark's header displays your menu links horizontally. This setting is most effective with a few top-level menu items with short titles. If there are too many items in your navigation, we recommend setting the *Links position* to *Below* or the *Style* to *Menu icon*.

### Menu icon

The **Menu icon** always appears on mobile devices, but you use the **Style** option display it at all times. When customers click the menu icon (☰), the drawer menu opens.

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-e75bece826be46375267257a6be0842c3a1ca1c5%2Fheader-mobile.jpeg?alt=media)

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Header** section to open the section settings.
2. Set the menu **Style** for the **Main menu** as either *Links* or *Menu icon*.

   > The *Links* option displays the menu at all times except on mobile. The *Menu icon* option keeps the menu in the drawer menu.
3. Set the **Links position** for the Main menu as either **Below** or **Inline**.

   > For menus with many links or long titles, we recommend placing the links **Below** the header title.
4. Choose whether to **Enable sticky header** to fix the Header to the top of the screen or window when customers scroll down the page.

   > If disabled, the Header remains at the top of the page.
5. Click **Save**.

</details>

## Settings reference

Click the **Header** section to find the following settings.

| Setting        | Description                                                                                                                                                             |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Main menu      | Select a menu to be displayed in the header. Menus are a Shopify feature. See Shopify's Menus and links to learn more about them.                                       |
| Secondary menu | Select a menu to be displayed in drawer menu.                                                                                                                           |
| Style          | Choose a menu style: either Menu icon (☰) or Links. Learn more here. On mobile devices, the style is always set to Menu icon.                                           |
| Links position | Choose to display the main menu links to the side header title or directly below. The links will appear either to the left or the right depending on the Logo position. |
| Logo position  | Choose the position of your logo in the header: either Left or Center. The Menu link and Links will change position depending on the Logo position.                     |

\\

\\

***

> **Related links**
>
> [Header](/spark/header/header.md)