How to Setup Mega Menu for Mobile View

Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobile devices and tablets.

Before you start, check the tutorial requirements:

  • Elementor (Free version)
  • JetMenu plugin installed and activated.If you have not done it yet, read the tutorial.
  • JetThemeCore plugin installed and activated.If you have not done it yet, read the tutorial tutorial.

Configure the Mobile Render Settings

Go to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetMenu > Mobile Render page to set the mobile mega menu. Unroll the needed tab and configure the required settings. In this case, we kept the default settings because the needed settings can be configured directly via the widget (e.g., the LayoutToggle PositionContainer PositionShow Sub Menu TriggerClose After Navigation, and more).

mobile render tab settings of the jetmenu plugin

Read the JetMenu Dashboard Overview to learn how to manage the Mega Menu widget settings.

Setup Mega Menu for Mobile View

Navigate to the WordPress Dashboard > Crocoblock > Theme Templates tab and open the header template with the Mega Menu widget added. Here, the only Layout tab is available. Then, move down to the Mobile Device Render toggle and enable it.

Things to know

If the Mobile Device Render toggle is disabled and the needed menu for mobile is not set, the widget will display the menu specified in the Menu settings of the Layout tab on all devices.

adding the mobile menu tab to the mega menu widget

Once activated, the Mobile Menu tab of this widget will appear.

mobile menu tab added

Unroll this tab and select the needed menu in the Menu for Mobile drop-down list. In this case, we chose the “Mobile Menu” option. Next, select the Mobile Device on which this menu will be displayed (in this case, we selected the “Mobile and Tablets” option in the Mobile Device drop-down list).

default settings of the mega menu widget

Then, we modified the menu design’s options. We set the “Left” Container Position, enabled the Close After NavigationItem Description Visible, and Item Divider Visible toggles, and selected the Loader Color and Toggle Closed State Icon.

settings of the mega menu widget

Once completed, press the “Publish” button.

That’s it. Now you know how to set the mobile menu for your WordPress website using the JetMenu plugin

Facebook
Skype
Twitter
LinkedIn
Pinterest
WhatsApp
Print
Threads
ABOUT AUTHOR
Rabby Islam

WordPress Web Developer | Loves To Coding & Explore new Things!

ADVERTISEMENT