# Header vertical

We also offer three distinct layout blocks for the header mega menu, each designed to cater to different visual and navigational preferences.

* [Mega menu with banner image (Vertical menu type)](https://nextsky-2.gitbook.io/milano-shopify/header-group/header-vertical/mega-menu-with-banner-image-vertical-menu-type)
* [Mega menu with product (Vertical menu type)](https://nextsky-2.gitbook.io/milano-shopify/header-group/header-vertical/mega-menu-with-product-vertical-menu-type)
* [Mega menu with collection (Vertical menu type)](https://nextsky-2.gitbook.io/milano-shopify/header-group/header-vertical/mega-menu-with-banner-image-vertical-menu-type)

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FJbm6YhMrFTY8wQItADfe%2Fimage.png?alt=media&#x26;token=8422c47b-f4db-408b-9c4f-aea379224393" alt=""><figcaption></figcaption></figure>

## General settings

## General settings

| Setting                 | Description                                                                                                                             |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Section width           | You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video. |
| Color scheme            | You are allowed to change text color, background color, etc. with preset color.                                                         |
| Phone Help Label        | Configure the contact information displayed in your store's header.                                                                     |
| Show email, phone       | Enable to display the store's email and phone number for customer contact.                                                              |
| Enable login pop up     | Enable the login popup to provide a quick and seamless login experience for users.                                                      |
| Separator line          | Decide to show the separator line on which page.                                                                                        |
| Sticky header           | Turn on the sticky header feature to keep the header visible at the top of the screen as users scroll down.                             |
| Enable sticky on mobile | Choose whether the sticky header feature should also be active on mobile devices, ensuring easy navigation across all platforms.        |
| Transparent on homepage | Turn on the option for a transparent header, offering a sleek look to your site.                                                        |
| Enable in mobile        | Decide whether to apply the transparent header feature to mobile devices as well, ensuring a consistent design across all platforms.    |
| Text and icon color     | Set the color for text and icons to match your store's branding.                                                                        |
| Mega menu               | Select from available mega menu designs or create a new one to enhance site navigation.                                                 |
| Dropdown animation      | Choose an animation effect for when the dropdown menus are activated, adding a dynamic visual touch to the user interface.              |
| Uppercase first level   | Convert the first-level text to uppercase for a bold and structured appearance.                                                         |
| Layout                  | Configure the layout position for the horizontal navigation and vertical menu sections.                                                 |
| Vertical menu           | Select a previously created vertical menu or set up a new menu.                                                                         |
| Title menu              | The heading for your vertical navigation section.                                                                                       |
| Collection Image Size   | Controls the display size and aspect ratio for collection list images.                                                                  |
| Limit show items        | Set the maximum number of items to display in this section.                                                                             |

### Menu label

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F8WKg19wloqbnF0jepum3%2Fimage.png?alt=media&#x26;token=0388f37f-15e4-4de1-a2c2-97dcde826c9a" alt=""><figcaption></figcaption></figure>

| Setting          | Description                                            |
| ---------------- | ------------------------------------------------------ |
| Label            | Used to assign a label to the corresponding menu item. |
| Color            | Set the color for label's text.                        |
| Background color | Set the background color for label.                    |

### Menu mobile

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FAE4KgG5SwmRWiJ82KD48%2Fimage.png?alt=media&#x26;token=c1d3e2ae-d17d-4eee-b82e-e57adf95d409" alt=""><figcaption></figcaption></figure>

* **Mobile Menu Title Color**: "Customize the color of the mobile menu title."
* **Mobile Menu Background Color**: "Set the background color of the mobile menu."
* **Menu Tab with Collection List**: "Add a tab displaying a collection list for navigation."

### Addons

You have the autonomy to select which icons or features are displayed, allowing you to tailor the interface to your preferences and the needs of your users.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FZPBzJ2BwwyHZDJD00K6p%2Fimage.png?alt=media&#x26;token=82c8edd1-4a52-4f63-ad55-59fa4105a27c" alt=""><figcaption></figcaption></figure>

### Section padding

Adjust the padding to control spacing within the section.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FvfvW2xMmHQ427QdI848V%2Fimage.png?alt=media&#x26;token=49765e45-053e-4c27-8b78-f9691ee91246" alt=""><figcaption></figcaption></figure>

## Block settings:

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FqWeEselY1WqOGajIzLvA%2Fimage.png?alt=media&#x26;token=bbc0f749-4490-4649-a962-116943f2ac9b" alt=""><figcaption></figcaption></figure>

| Setting   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Menu item | <p>Specify the name of the menu item to which the layout will be applied.</p><p>Configure the vertical menu by selecting the top-level (level 1) menu items from your chosen navigation.</p>                                                                                                                                                                                                                                                                                                                |
| Submenu   | <p></p><ul><li><strong>Desktop menu columns:</strong> The submenu settings include the option to determine the number of columns for the desktop menu.</li><li><strong>Mega menu custom width:</strong> You can also set a custom width for the mega menu.</li><li><strong>Center submenu:</strong> Align the submenu to the center.</li><li><strong>Full width:</strong> If you select full width, it will override any custom width setting, expanding the menu across the entire screen width.</li></ul> |

### **Adding Icons to Vertical Menu Level 1 Items:**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FIr9Guflx7KnZFgKACi8w%2Fimage.png?alt=media&#x26;token=6d827931-52a3-4c9f-a2bc-e2b095b428fd" alt=""><figcaption></figcaption></figure>

Each menu item level 1 corresponds to a collection, you need to create a custom metafield for that collection to upload the icon file (can be an image or svg).

{% hint style="success" %}
**Step 1: Create the Custom Metafield for Collections**

1. Go to **Settings** > **Custom data** in your Shopify Admin.
2. Click on **Collections**.
3. Click **Add definition**.
4. Configure the metafield as follows:
   * **Name:** `Menu Icon` (or your preferred name)
   * **Namespace:** Image/Icon collection in vertical menu
   * **Key:** custom.image\_collection
   * **Type:** Choose **File**. In the "File types" dropdown, select **Image** and/or **Generic file** (if using SVG).
5. Click **Save**.
   {% endhint %}

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FpTCvGTSPFLlg3DPP7imG%2Fimage.png?alt=media&#x26;token=d0d3a5a2-2872-4097-8571-93ed04202aee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fnks2ab4n7aUyrLjr4m1M%2Fimage.png?alt=media&#x26;token=58477fae-dabc-4200-b3f9-68bc12842956" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Step 2: Upload an Icon to a Collection**

1. Go to **Products** > **Collections**.
2. Open the collection you want to add an icon to.
3. Scroll down to the **Custom data** section. You will see your new "Menu Icon" field there.
4. Click **Upload file** and select your icon (Image or SVG).
5. Save the collection.
   {% endhint %}

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FbKjuNc6sD61K2dwvb6id%2Fimage.png?alt=media&#x26;token=30261b80-25fe-4916-b8ab-d259ec72d04d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FglDUjETlkh1HVGxh8uAS%2Fimage.png?alt=media&#x26;token=1ff0d6d0-5bbf-432d-8194-cdc352edeb79" alt=""><figcaption></figcaption></figure>