> 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/volume-themes/faq/navigation-and-header/mega-menu-columns-banners-width-and-clickable-parents.md). # Mega menu: columns, banners, width and clickable parents Column headings, banners, width and the short variant of the Volume mega menu, plus how the block finds the menu item it belongs to. A mega menu in Volume is a **block** you add to the **Header** section, and it is bound to one top-level menu item. ### Pointing it at a menu item The block has no menu picker. It has a text field, **Dropdown link**, where you type the name of the menu item the panel should open under — for example `Shop`. The panel is then filled with that item's own sub-items from the menu selected in the Header's **Menu** field. Capitalisation and spacing do not matter, the theme compares handleized values on both sides. If the panel opens empty, either **Dropdown link** does not match any item, or that item has no sub-items in the menu. **Menu handle** below it is optional. Use it only when the same item name appears in more than one menu and the wrong one is picking up the panel: in **Online Store → Navigation**, open the menu containing the item and copy that menu's handle into the field. {% hint style="warning" %} A mega menu replaces the ordinary dropdown for that item completely — the plain nested list is not rendered alongside it. {% endhint %} ### Columns, width and dividers **Columns** spreads the first level of sub-items across 1 to 6 columns (4 by default). **Show dividers** draws the vertical lines between them, **Show top line** the line under the header, **Show overlay** dims the page behind the panel. Width is set by **Grid**: **Page**, **Alternative**, **Secondary** or **Custom**. Choosing **Custom** reveals **Width** (1040–2560 px) and **Column gap**. **Disable grid max-width** lets the panel run edge to edge instead. **Vertical content alignment** and **Horizontal link alignment** handle the position of the links inside the panel. ### Styling the two link levels The **First nested** and **Second nested** groups are typography, not content. Each has **Link style**, **Uppercase** and **Bolder font** — **First nested** styles the column headings, **Second nested** the links listed under them. There are no separate heading fields per column: the column heading *is* the first-level menu item, and it links to whatever URL that item points to. ### Banners Six slots, **Banner 1** to **Banner 6**, each with **Subheading**, **Heading**, **Image** and **Link**. They are laid out after the link columns, or before them if **Swap banners position** is on. The rest of the banner settings are shared by all six: **Center text**, **Vertical content position**, **Media ratio**, **Banner size** (50–100% of the available space), the overlay controls, and **Heading style** / **Subheading style**. ### The short variant Volume also ships a separate block called **Mega menu short**. It is a deliberately compact panel and differs from the full one in three ways: * **Columns** only goes up to 3; * it has three banner slots, not six; * it is hard-capped at **800px wide**. Its **Grid** and **Disable grid max-width** settings are present but have no effect on the panel width. If your mega menu refuses to go full width, or half of your banner slots are missing from the editor, you are on **Mega menu short**. Swap the block for **Mega menu**. {% hint style="success" icon="lightbulb" %} The Header's **Highlight menu items** field works on mega menu links too, but the list must be separated by a comma **and a space** — `Sale, New in` works, `Sale,New in` is read as one name and highlights nothing. Setup walkthrough in [Mega menu](/docs/volume-themes/navigation/mega-menu.md). {% 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/volume-themes/faq/navigation-and-header/mega-menu-columns-banners-width-and-clickable-parents.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.