Configuring mobile menu plugins to work with Max Mega Menu

There are many plugins available which will add a dedicated mobile menu to your website. If you prefer to use one of these instead of the default Max Mega Menu mobile menu, these instructions will help you configure your dedicated mobile menu plugin.

There are many dedicated mobile menu plugins available, including Responsive Menu and ShiftNav.

These plugins are configured in much the same way (they require the CSS selector of the existing menu to hide). In this example we will use Responsive Menu.

Step 1: Find the Max Mega Menu wrapper ID

Right click on your webpage and go to “View Page Source”. Search for “mega-menu-wrap”:

Page source showing the mega-menu-wrap ID

You should find an ID which looks similar to the above (mega-menu-wrap-max_mega_menu_1). The last part (max_mega_menu_1) will be different depending on your menu location.

Copy this ID, and prefix it with “#”. You should end up with something like:

Step 2: Configure Responsive Menu

Go to Responsive Menu > Menus and click “Add New Menu”. Choose a theme, then on the “Menu Settings” step paste the selector from Step 1 into the “Hide Theme Menu” field:

Responsive Menu Hide Theme Menu setting with the Max Mega Menu wrapper ID

Max Mega Menu will now be hidden on the devices where the Responsive Menu mobile menu is displayed.

Tip: Alternatively, you can hide the Max Mega Menu mobile menu using custom CSS, which allows your theme’s own mobile menu to be used on mobile devices.

Plugin Support

Please note, although we have documented how to configure these plugins with Max Mega Menu, as we are not the authors we do not support them ourselves. Any support issues related to these plugins should be directed to the plugin authors.