> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/mega-menu-and-hover-mega-menu.md).
# Mega menu & Hover mega menu
Set up Mega menu and Hover mega menu in Avante: column-based link layouts with promotional banners, dropdown link matching, and per-item hover banners.
Avante includes two types of advanced navigation blocks for the Header — **Mega menu** and **Hover mega menu**. Both expand into a full-width panel when a visitor opens the menu item they are attached to.
How that panel opens is controlled on the Header section itself, not on the block. In **Theme Editor → Header**, the **Open dropdown items on** setting is **Hover** by default — switch it to **Click** and every header dropdown, mega menus included, opens on click instead. **Show dropdown icon** is on by default and adds the small arrow next to menu items that have a dropdown; turn it off for a cleaner navigation bar.
{% hint style="success" icon="lightbulb" %}
Both blocks automatically transform into a regular dropdown menu when the header width is less than 1024px (mobile and tablet).
{% endhint %}
***
### Mega menu vs Hover mega menu
| | Mega menu | Hover mega menu |
| ---------------- | ----------------------------------- | --------------------------------------- |
| Layout | Links in columns | Links + up to 2 banners |
| Per-item banners | — | ✓ via Hover mega menu banners block |
| Columns | 1–4 | — |
| Best for | Large catalogs with many categories | Visual storytelling, featured campaigns |
***
### Setup — Mega menu
#### Step 1 — Create nested menu items
The mega menu displays child links from your navigation.
1. Go to **Shopify Admin → Content → Menus**
2. Open your main menu
3. Drag child links underneath the parent item you want to use as a trigger
4. Save
#### Step 2 — Add the Mega menu block
1. Open **Theme Editor → Header**
2. Click **Add block → Mega menu**
3. In the **Dropdown link** field, enter the exact name of the parent menu item (e.g. `Seasons`, `Shop`)
4. Configure the block settings (see below)
{% hint style="warning" %}
The **Dropdown link** value must match the menu item name exactly — including capitalization. Do not translate this field using Translate & Adapt or any other app.
{% endhint %}
Block settings
**Dropdown link**\
Enter the title of the dropdown parent link to show its nested menu as the mega menu.
**Highlight menu item**\
Enter item names separated by commas to display them in accent color (e.g. `Sale, New`).
**Menu heading**\
Optional text heading above the menu links. Wrap a word in `{curly brackets}` to apply the Secondary heading style from Theme settings → Typography.
**Heading size**\
Choose the size of the heading text.
**Width**
* **Wide** — spans the full width of the page
* **Narrow** — leaves spacing on both sides
**Columns**\
Select 1–4 columns. Links are automatically divided into equal-sized columns.
**Show lines**\
Enable to display divider lines between columns.
#### Step 3 — Add a banner (optional)
1. Enable **Show banner**
2. Upload an **Image** (landscape 3:2 or wide 16:9 works best)
3. Add a **Banner link** URL
4. Adjust **Image overlay**, **Image overlay gradient**, and **Image overlay opacity**
5. Set **Content color** for heading and subheading text
6. Add **Subheading** and **Heading** text
7. Set **Subheading size** and **Heading size**
8. Use **Swap banner position** to move it from right to left
9. Set **Vertical** and **Horizontal text alignment**
***
### Setup — Hover mega menu
#### Step 1 — Add the Hover mega menu block
1. Open **Theme Editor → Header**
2. Click **Add block → Hover mega menu**
3. In the **Dropdown link** field, enter the exact name of the parent menu item (e.g. `Shop`)
{% hint style="warning" icon="triangle-exclamation" %}
The **Dropdown link** value must match the menu item name exactly — including capitalization. Do not translate this field using Translate & Adapt or any other app.
{% endhint %}
Block settings
**Dropdown link**\
Enter the menu item name to be displayed as hover mega menu.
**Highlight menu item**\
Enter item names separated by commas to display them in accent color.
**Color**\
Sets the color for highlighted menu items.
**Link size**\
Choose the typography size for menu links.
**Menu heading**\
Optional heading above the menu links. Wrap a word in `{curly brackets}` to apply the Secondary heading style from Theme settings → Typography.
**Heading size**\
Choose the size of the heading text.
**Width**
* **Wide** — spans the full width of the page
* **Narrow** — leaves spacing on both sides
**Show lines**\
Enable to display divider lines between menu items.
#### Step 2 — Configure banners
The Hover mega menu supports **Banner 1** and **Banner 2** — two static banners displayed alongside the menu links.
For each banner:
1. Enable **Show banner**
2. Upload an **Image** (landscape 3:2 or wide 16:9 works best)
3. Add a **Banner link** URL
4. Adjust **Image overlay**, **Image overlay gradient**, and **Image overlay opacity**
5. Set **Content color** for text
6. Add **Subheading** and **Heading** text
7. Set **Subheading size** and **Heading size**
8. Set **Vertical** and **Horizontal text alignment**
#### Step 3 — Add per-item banners (optional)
This block lets you show a different banner when hovering over a specific child item within the Hover mega menu.
1. Click **Add block → Hover mega menu banners**
2. In the **Hover menu item link** field, enter the name of the **child menu item** (e.g. `Shop by type`) — not the parent trigger
3. *(Optional)* Fill in the **Dropdown link** field to specify which Hover mega menu block these banners belong to — only needed if the same child item appears in more than one Hover mega menu block
4. Enable **Show banner**, upload an image and configure the banner settings
***
### Common issue: menu not opening
The most common cause is a mismatch between the **Dropdown link** field and the actual menu item name.
**Check:**
1. Open **Theme Editor → Header → Mega menu** or **Hover mega menu** block
2. Note the value in **Dropdown link**
3. Go to **Shopify Admin → Content → Menus** and confirm a menu item with that exact name exists and has child links under it
{% hint style="danger" %}
Never translate the **Dropdown link** field using **Translate & Adapt** — this breaks the connection to your navigation tree.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/mega-menu-and-hover-mega-menu.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.