> For the complete documentation index, see [llms.txt](https://seyarat.gitbook.io/seyarat-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seyarat.gitbook.io/seyarat-docs/configuration/menubar-and-mega-menu.md).

# Menubar & Mega Menu

This section explains how to create menus and mega menus using Elementor widgets.

### Create a WordPress Menu

Go to **Appearance > Menus** and click **Create a new menu**.

1. Enter a **Menu Name** and click **Create Menu**.
2. Add items from **Pages, Posts, Custom Links, or Categories**.
3. Drag and drop items to reorder them. Drag an item slightly to the right to create a submenu.
4. Under **Menu Settings** → **Display location**, tick **Primary Menu** for the desktop/header location. If you want the same structure on mobile, also tick **Mobile Menu**.
5. Click **Save Menu**.

To edit the menu later, return to **Appearance > Menus**, select the menu, make your changes, and save again.

<figure><img src="https://1137831851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWlIbC5CXBAhb9rMlflt%2Fuploads%2FXjpZdktHN8GfRI7roY5D%2Fimage.png?alt=media&amp;token=e0c51e2a-bc53-4b1e-85b5-b23c799e21e4" alt=""><figcaption></figcaption></figure>

### Create a Mega Menu template

A Mega Menu template is the wide content panel shown below a parent navigation item. Build only the dropdown content—do not add the site header itself inside this template.

1. Confirm **Elementor** and **N3Theme Core** are active.
2. Open **N3Theme** → **Mega Menu**. Click **Add New**.
3. Enter an administrative title that identifies the parent menu, for example *Vehicles Mega Menu*. Visitors normally see the parent menu label, not this template title.
4. Click **Publish**. Publishing first ensures WordPress can offer the template in the menu-item panels.
5. Click **Edit with Elementor**.
6. Create one outer container for the dropdown content. Add inner containers or columns for logical groups such as *Shop by Type*, *Popular Makes*, *Resources*, and a promotional image.
7. Add headings, icons, images, buttons, or Elementor/Nav Menu widgets as needed. Every link must point to a real public archive, taxonomy, page, or URL.
8. Set the outer container background, padding, gap, and width. Keep text contrast accessible and optimize every image.
9. Open Elementor Responsive Mode. Verify tablet/mobile wrapping; avoid fixed widths that exceed the viewport. A complex desktop mega menu may be replaced by simpler normal child links in a separate Mobile Menu.
10. Click Update, then exit Elementor.

**Make Mega Menu templates visible in Appearance → Menus**

1. Return to **Appearance** → **Menus** and select *Main Menu* from **Select a menu** to edit.
2. Click **Screen Options** in the top-right corner of the WordPress screen.
3. Under Boxes, enable **Mega Menus**.
4. Close **Screen Options**. A new **Mega Menu** panel should now appear in the left **Add menu items** column.
5. If it does not appear, reload the page, confirm the template is **Published**, and confirm N3Theme Core is active.

**Assign the Mega Menu to a parent item**

1. In **Menu structure**, first create or locate the normal parent item that visitors will hover or tap, for example *Vehicles*. The parent can be a Page, archive, or Custom Link.
2. Open the **Mega Menu** panel on the left, choose **View All**, tick ***Vehicles Mega Menu***, and click **Add to Menu**.
3. The template appears as a new item in **Menu structure**. Drag it directly below *Vehicles* and slightly to the right until WordPress shows it as a sub item of Vehicles.
4. Keep the **Mega Menu** template item beneath only one intended parent.
5. Click Save Menu.
6. Open the public website in a private browser window. Hover or focus *Vehicles* on desktop. The Elementor template content should open as its dropdown panel.

<figure><img src="https://1137831851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWlIbC5CXBAhb9rMlflt%2Fuploads%2F3AjRm171lzZM5R25JAO9%2FScreenshot%202026-08-27%20171224.png?alt=media&amp;token=20853e97-0926-40e0-afa2-71e6a1c3c8bd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1137831851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWlIbC5CXBAhb9rMlflt%2Fuploads%2Ftig6jjpCrwGxkx31pJIY%2Fimage.png?alt=media&amp;token=2e451ce0-be3a-4f24-9afd-6dcd4bdae525" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1137831851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWlIbC5CXBAhb9rMlflt%2Fuploads%2FixraXQ8Q3QanY2QjYIf0%2Fimage.png?alt=media&amp;token=a8590beb-00cb-4957-9cfb-309965e21557" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1137831851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWlIbC5CXBAhb9rMlflt%2Fuploads%2F0JxH6AcI6xotgO6mE7fL%2Fimage.png?alt=media&amp;token=c0dd0392-16cd-4b59-bf57-e8a0dee300f9" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://seyarat.gitbook.io/seyarat-docs/configuration/menubar-and-mega-menu.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.