> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/nimbus-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/nimbus-theme/global-sections/megamenu/megamenu-gallery-banner.md).

# Megamenu (Gallery banner)

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FR3xOeSMgQ1Jpt16YJR2f%2Fmega1.jpg?alt=media&amp;token=e7889eec-1e9a-441c-ae88-c49e9ead4c9b" alt="" width="334"><figcaption></figcaption></figure>

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

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

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FiIZxZwTrtAYcYj2kVGMZ%2Fgl-5.jpg?alt=media&amp;token=49152e16-9af5-4249-a3ca-9edfcfcf6637" alt=""><figcaption></figcaption></figure>

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

### Dropdown settings

* Width - 2 options => Container / Stretched

### Navigation

* **Columns Link** - From 1 - 6
* **Show column dividers**

### Banner

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

#### Banner image 1

<div><figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FvHGF5pZpTavKky8qdUOo%2Fgl-3.jpg?alt=media&amp;token=a537f513-564c-4288-98b6-1c047880e3ef" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FIuTqPjKD3sNav2Lolmv5%2Fgl-4.jpg?alt=media&amp;token=cd2cf612-e844-43dd-85a4-385955b7100c" alt=""><figcaption></figcaption></figure></div>

**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** will be similar to Banner image 1
{% endhint %}

#### Result

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FwzwVWVTk2PzcbSOZck7G%2Fr2.jpg?alt=media&amp;token=8b7db897-baa1-46e9-96bd-3c3b19c696a9" alt=""><figcaption></figcaption></figure>