How to Create a Mega Menu

Creating a mega menu can greatly enhance your website's navigation, allowing users to access multiple levels of the site hierarchy at a glance. The JupiterX theme makes it easy to create an advanced mega menu. Below is a step-by-step guide on how to set up a mega menu using the JupiterX Advanced Menu widget.

Step 1: Accessing the Advanced Menu Widget

1. Navigate to the page or header where you want to add the mega menu.
2. Open the page with Elementor by clicking on “Edit with Elementor.”
3. From the left sidebar panel in Elementor, search for the “Advanced Menu” widget and drag it to the desired section on your page.

Step 2: Configuring the Content Tab

The Content tab is where you can define the structure and content of your mega menu.

Content

• Menu Items: Here, you can add and organize your menu items.
  • To add a new item, click the “+ Add Item” button.
  • For each menu item, you can specify the type of content it will hold. Options include:
    • Item Type: Choose “Sub Menu” if you want this item to reveal more items when hovered over or clicked.
    • Content Type: Select “Saved Section” if you want to use a section you’ve created and saved in Elementor.
    • Select Section: Click to choose from a list of previously saved sections in Elementor. This is where you select the actual content that will appear in the dropdown mega menu.

Layout

There are a few settings related to mega menu in the 'Layout' section:

• Submenu Animation: Set the animation for how mega menu appear, such as Fade or Slide down.
• Show Submenu On: Decide if the mega menu will appear on click or hover.
• Submenu Indicator: Choose an icon to indicate the presence of a mega menu.

Step 3: Creating Content for the Mega Menu

Before you can select a section for your mega menu, you need to create and save one.

1. Go to the WordPress Dashboard.
2. Navigate to “Templates” under “Elementor” in the left sidebar.
3. Here you will find all your saved templates. To create a new one, click on “Add New Template.”
4. Select "Section" as the template type.
5. Design your section with the desired elements and widgets.
6. Save your section.
7. Once saved, it will appear in the list of available sections when you select “Saved Section” in the Advanced Menu widget.

Step 4: Styling Your Mega Menu

Setting the mega menu width

1. Locate the "Submenu Width" option within the menu item settings in the Advanced Menu widget.
2. You will have two choices for setting the width:
   • Default: Select this option if you want the mega menu to take the width defined by the theme default settings.
   • Custom: Choose this option if you wish to specify a custom width for your mega menu. When "Custom" is selected, additional options appear:
     • Width (px): Enter the desired width in pixels for your mega menu. This width will be applied to the mega menu, overriding any default settings.
   • Equal to Column: Select this option if you want the mega menu to take the same width as the column it is in.
   • Equal to Container: Select this option if you want the mega menu to take the same width as its container.
   • Equal to Section: Select this option if you want the mega menu to take the same width as the its parent section.
   • Equal to Widget: Select this option if you want the mega menu to take the same width as widget inside the menu. This option works only when you set "Widget" as "Content Option".

Setting Mega menu Position

The position of the submenu determines where it will appear relative to the menu item.

1. Locate the "Submenu Position" option within the menu item settings in the Advanced Menu widget.
2. There are three positions to choose from:
   • Right: The mega menu opens to the right side of the menu item. This is typically used for left-aligned or vertical menus.
   • Center: The mega menu is centered underneath the menu item. This option works well for menu items that are centrally located.
   • Left: The mega menu opens to the left side of the menu item. Choose this for right-aligned menus.

Setting the space between mega menu and menu items

1. From the style tab, choose "Submenu" section.
2. Choose a desired value from "Space Between" option.

Content Effects

Furthermore, there are some special effects you can add to your mega menu. These effects will apply to the page and they will be triggered when the mega menu is open.

• Blur Content: Toggle to apply a blur effect to content when a submenu or mega-menu is opened.
• Content Overlay: Add an overlay to the content when a submenu or mega-menu is opened.