# 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="/files/nhiUfhKTsrRGA0OXoVt6" 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="/files/TMMqfpVQ4Ref1lC6Qi98" 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="/files/uPlYmfm1Wb8zWOharfXl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Bf86NeMvG6ZkLKZ7sfwS" 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="/files/UeLtUCEUuXra9rSEQ2cL" 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="/files/GCE3clzeCelzj8zDO0Uj" 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="/files/ILqerLhM8ymIk2ha2tlu" 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="/files/utHFXrDBnTewKm3SoTmN" 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="/files/tpVxQYz9NBUGqK3nl63v" 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="/files/JtK93rJ36xTifI86oAb0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/UyAqaacko58nrluq0YVi" 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="/files/E2HRIALoNpyBPUQlocpF" 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="/files/rmd6bkvp3hxxSbjNtx5V" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uxper.gitbook.io/july-woocommerce-wordpress-theme/faqs/how-to-create-mega-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.