Max Mega Menu includes a native Elementor element, which can be used to display a Max Mega Menu enabled menu location anywhere within an Elementor page or template (for example, an Elementor header template).
Step 1: Choose a menu location
The element displays a menu location, so you’ll need a menu location with Max Mega Menu enabled. You can use a location registered by your theme, or create a new one under Mega Menu > Menu Locations by clicking “Add another menu location” (see Menu Location Settings).
Step 2: Add the Max Mega Menu element
In the Elementor editor, search for “Max Mega Menu” in the Elements panel and drag the Max Mega Menu element onto the page.
Step 3: Select the menu location
Under “Menu Location”, choose the menu location you wish to display. The menu will be displayed in the editor preview immediately.
Fix Menu Z-Index
If your menu (either on desktop or mobile) is sitting behind other elements on the page, edit the container (not the Max Mega Menu element) that the menu sits inside, go to the “Advanced” tab and apply a high Z-Index (e.g. 999):
Displaying Max Mega Menu inside an Elementor Popup
Elementor Popups are a feature of Elementor Pro.
If certain aspects of the menu do not work when it is displayed within a popup (for example, clicking the arrows to open sub menus), re-initialise the menu when the popup is shown. Install the WPCode plugin and add the following as a JavaScript snippet (set to run in the site footer):
|
1 2 3 |
jQuery(document).on(‘elementor/popup/show’, function () { jQuery(‘.max-mega-menu’).maxmegamenu(); }); |