# Layout and style

## Header layout

{% hint style="info" %}
New header styles with **Icons** and menu options were added to v5.0.0 on April 12 2022. See our [changelog](https://help.fluorescent.co/lorenza/readme/changelog) to learn more.
{% endhint %}

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* (☰).

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

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-a7afb7ec0d187a78c52764404c93e6219a202e74%2Fheader-style-settings.jpeg?alt=media)
2. Set the **Header style** to **Text only**, **Icon**, or **Streamline**. The **Streamline** style is always used for mobile devices.

   ![Text only](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-2e30c561de2867b325a8d4f4a92c0810770bf363%2Fheader-text.jpeg?alt=media)

   ![Icon](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-25836c8511f81321ecc1f56eb7bd71b263eddfa1%2Fheader-icon.jpeg?alt=media)

   ![Streamline](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-3b585bd34adf7c2c15d8c89f24fbfcec74d96c08%2Fheader-streamline.jpeg?alt=media)
3. If you chose the **Icon** or **Text only** style, select a **Navigation position** to change the alignment of the Store title (or logo) and menu links.

   > When set to **Center**, the store logo or title appears on the left.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-a010387efe3216472f660b36ce471d827b608d66%2Fheader-nav-centered.jpeg?alt=media)
4. Choose how nested or mega nav menus open: either when customers **Hover** over or **Click** on the parent link.
5. Click **Save**.

</details>

## **Header colors and fonts**

{% hint style="info" %}
Expanded font style options were added to v5.0.0 on April 12 2022. See our [changelog](https://help.fluorescent.co/lorenza/readme/changelog) to learn more.
{% endhint %}

Click on the **Header** section and open the **Theme settings** tab to find options for colors and fonts.

<details>

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

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

1. Click on the **Theme settings** tab to find the header font and color options.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-38a9a16e9c78c488fbd24dfb3721261e65d78b1d%2Fheader-color-settings.jpeg?alt=media)
2. Use the **Logo font size** slider to change the size of your store title.

   > If you uploaded a logo image, use the **Custom logo size** slider above.
3. Set the **Navigation font weight** to display your menu links and icons with a **Normal** or **Bold** style.
4. Check the **Display navigation font in uppercase** option to show the regular case of your store title as set in the Shopify Admin (**Settings > Store details > Basic information**).
5. Change the **Text color** of the menu links, store title, and icons in the header.
6. Click **Save**.

</details>

## Settings reference

Click on the **Header** section to find the following settings:\\

| Setting              | Description                                                                                                                                                                 |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Header style         | Use the Text only, Icon, or Streamline header style. The Streamline style displays menu links in a drawer with a menu icon (☰). For mobile, the style is always Streamline. |
| Navigation position  | Change the layout and alignment of the Store title (or logo) and menu links. This setting is available for the Icon and Text only header styles.                            |
| Dropdown interaction | Choose how nested or mega nav menus open: either when customers Hover over or Click on the parent link.                                                                     |

| Setting                              | Description                                                                                             |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| Logo font size                       | Select the relative font size of your store title. This setting applies when no logo image is uploaded. |
| Navigation font weight               | Select a Normal or Bold style for your menu links and header icons.                                     |
| Display navigation font in uppercase | Display your menu links and store title in all capitals.                                                |
| Text color                           | Select the color of the text.                                                                           |
| <p><br></p>                          |                                                                                                         |

***

> **Related links**
>
> [Header](https://help.fluorescent.co/lorenza/pages/header)


---

# 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/lorenza/pages/header/layout-and-style.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.
