# How to create Mega Menu

To create the mega menu, please follow the steps:

**Step 1**: Go to **Admin Dashboard** -> Select **Mega Menu from the left sidebar** -> **Add new**

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2Fhvak1knXKfOzdTw8SklX%2Fadd%20new.png?alt=media&#x26;token=b14c1235-7cc7-43de-b858-ffc177494335" alt=""><figcaption></figcaption></figure>

**Step 2:** Enter the name of the menu -> Select Template " **Elementor Canvas** " -> Click **Publish** to save it. And then, select **Edit with Elementor** to edit the menu.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FCzI1TKymXVCA9CM4Hj5t%2Fenter%20title.png?alt=media&#x26;token=65389346-1962-43f0-ab2b-f713a707384e" alt=""><figcaption></figcaption></figure>

**Step 3:** In Elementor, Click the button **Add New Section** -> Then, select the structure that you want to set up for the mega menu.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FfKjAcMrOC8TPgkwHNopN%2FClick%20btn%20add%20section.png?alt=media&#x26;token=39b8d933-ee1d-459c-af5c-6ebcf3b310e1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FTG5kC3d6USlKVl2tCyJk%2FSelect%20structure%20the%20menu.png?alt=media&#x26;token=2eabfda3-b972-4436-9288-3d3b02540c63" alt=""><figcaption></figcaption></figure>

**Step 4**: If you want to add an image product category in the menu: Select " Product Category " and drag it to the position that you want.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FSj2RIl5VVhal7Hs6pQwO%2Fdrag%20product%20category.png?alt=media&#x26;token=adb2c004-45b4-429b-879d-84984a74a118" alt=""><figcaption></figcaption></figure>

* Next, Select **Content** -> Select **Style** of category -> Select **Category.**
* Then, Click the button " **Show Image** " -> **Choose Image** of category -> Choose **size mode** or **Custom Height** of the image that you want.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FV2FEEA1ozM9xZZ8TXnhI%2FCategory.JPG?alt=media&#x26;token=eaa5e7df-d07c-47b1-94ae-03d3db174efc" alt=""><figcaption></figcaption></figure>

* If you want to customize the style for the category, you can select the tab **Style**, or if you want to customize padding/ margin... you can select the tab **Advanced.**
*

```
<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FD8Ng9L3wldDmJWHS3TMV%2FStyle%20and%20advanced.png?alt=media&#x26;token=7dd9258c-88a7-4be2-81bd-9dc0369cb65f" alt=""><figcaption></figcaption></figure>
```

```
**Step 5**: If you want to add a list menu:
```

* First: you need to create the primary menu
* Next, You need to add a list menu title. In Elementor, select " **Heading**" or " **Modern Heading**" to add a title and drag it to the position that you want. Then Add your heading title -> Select **HTML Tag** -> Customize **Style**/**Advanced** of Heading.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FFAKROf5FRukXEBQEsEQz%2FHeading.JPG?alt=media&#x26;token=4e06d335-3822-49cc-b553-a64a979d3a51" alt=""><figcaption></figcaption></figure>

* Then, add a list menu: In **Elementor** -> Select **Morden Menu** and drag it to the position that you want. In the Tab Content, you need to choose the primary menu that you created before. And select the tab Style/Advanced to customize the list menu.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FthiLj22SmkTFCayEc7rH%2Fmordern%20menus.png?alt=media&#x26;token=e250e2b6-cbaa-4916-a651-a4a50ca10bcb" alt=""><figcaption></figcaption></figure>

**Step 6**: If you want to add a background color, image... to the menu. Click **Edit Section ->** Select the tab **Style -> Background -> Background Type ->** Select **Classic ->** Choose the color or image... that you want to add to the menu.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2Fw13aaHhnYSC2sgfFw6b6%2FEdit%20section.png?alt=media&#x26;token=83c9e1ff-9f3e-4ab7-aeec-380464b5f5b9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FcBC51EcS69hqTVcE4EYy%2Fcolor%20menu.png?alt=media&#x26;token=c2d1ad91-30f5-4723-9595-f95710cf4dbb" alt=""><figcaption></figcaption></figure>

**Step 7:** After you have finished, click **Update** to save your menu.

**Step 8**: To display your menu on your site. Go to **Admin dashboard** -> Select **Appearance** -> **Menus**

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FmuKgaemMhMjvCMlkqyHv%2FMenus.png?alt=media&#x26;token=8750b227-5072-4c4d-9bad-c0e4d728d604" alt=""><figcaption></figcaption></figure>

**Step 9**: Select options **Mega Menus** in the **tab Add menu items** -> Choose the mega menu that you created before -> Select **Add to Menu** -> and **drag it to the position that you want** -> And click **Save Menu** to save.

<figure><img src="https://1409670460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAu1Mq3plqNVcSe8O59tU%2Fuploads%2FzrryUQoOUt1eFvOe3VR0%2Fselect%20menu.png?alt=media&#x26;token=fe224c8f-1c8b-4feb-b25d-f9eacda21ccc" alt=""><figcaption></figcaption></figure>
