> 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-gallery-banner.md).

# Megamenu (Gallery 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 (Gallery banner).**
   {% endhint %}

<figure><img src="/files/4jpbVV2cNOXCygGP5brv" alt=""><figcaption></figcaption></figure>

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

### Label text

* 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/yXOkp9icvO039WJEXEUS" 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** - 9 options&#x20;
* **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**
* **Overlay color**
* **Overlay opacity** - From 0 - 100%
* **Overlay gradient -** If left blank, the overlay will default to using the overlay 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 %}