> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/global-sections/megamenu/megamenu-classic-banner.md).

# Megamenu (Classic banner)

<figure><img src="/files/HZh2rghb7qaps1YRUn12" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

1. In the **Header** section, **Add block**&#x20;
2. Choose **Megamenu (Classic banner).**
   {% endhint %}

<figure><img src="/files/YKpAARqhY4TcXbuCDyoY" alt=""><figcaption></figcaption></figure>

**Menu item** - Name the link in the main menu that you'd like the menu to appear from.

### Label settings

* Label text
* Label color
* Label background color

### Dropdown settings

* Width - 2 options => Boxed / Wide

### Navigation

* **Columns Link** - From 1 - 6
* **Show column dividers**
* Enable custom image navigation ⇒ Each rule must be in its own line.

First, upload the desired swatch images to your Shopify store. To do that, navigate to Content > Files in your Shopify admin and click Upload files. We suggest 64x64 px .jpg

```
Earrings:m1.jpg
Necklaces:e2.jpg
Rings:m31.jpg
Bracelets:m4.jpg
Chamrs:m5.jpg
```

### Banner

* **Show banner**
* **Banner position** - 2 options left/right
* **Banner width -** from 30% - 100%  The navigation column will automatically adjust its width.
* **Columns per row**

#### Banner image 1

<figure><img src="/files/o2yKSVulX7p7zT95L228" alt=""><figcaption></figcaption></figure>

**Settings banner**

* **Image** - If image blank, this block will not show.
* I**mage ratio**&#x20;
  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)
  * Landscape (5:3.5)
  * Wide (16:9)
* **Link** - Link for image
* **Content alignment** - Left / Center / Right
* **Sub heading**
* **Heading**
* **Heading size** - Size for heading, Select heading size from H1 to H6.
* **Description**
* **Button style** - 7 option for button
* **Button text**&#x20;
* **Text Color**

{% hint style="info" %}
**Banner image 2, Banner image 3, Banner image 4, Banner image 5, Banner image 6** will be similar to Banner image 1
{% endhint %}

#### Result

<figure><img src="/files/VhX9C8O4FUfbDoh6xPHx" alt=""><figcaption></figcaption></figure>