Back to contents

Creating a responsive mobile mega menu with JetMenu for Elementor

This detailed tutorial will teach you how to create a responsive mobile mega menu with the help of JetMenu plugin.

We have already got a menu for a desktop. Now we need to make it responsive so that it would look good on mobile devices with the help of JetMenu plugin.

JetMenu plugin

Creating a responsive mobile mega menu

Step 1 — First of all, open your WordPress Dashboard and proceed to the JetMenu > General settings. Here you have to scroll down and find the Mobile Breakpoint option where you can set the breakpoint between the desktop menu and mobile menu in pixels. It means if you set 768 pixels breakpoint, all the mobile devices with the screen resolution less than that would display mobile version of the mega menu.

JetMenu General settings

Step 2 — Don’t forget to click the Save button so that all the changes are preserved.

Step 3 — You can also style your mobile menu up from the Dashboard by moving to the Jet Menu > Mobile Menu and selecting the right Toggle text color, Toggle background color, Container background color and Cover background color with the help of a color picker tool.

Jet Menu Mobile Menu block

Step 4 — Since you have to constantly switch between frontend and backend to see all the changes, it’s better to style your menu up in Elementor, since these options are available there as well. Just open your menu template with Elementor page builder and open Style > Mobile Menu and here they are.

Style settings for Mega Menu widget

Step 5 — It’s also easy to predict what your menu will actually look like by moving to the screen icon in the bottom of the Elementor panel which is in charge of the responsive mode. Click it and select the mobile mode.

mobile mode

Step 6 — Pay attention, if you have a mega menu, the first time you click the menu item the mega menu appears. However, when you click for the second time, a link works and respective page is opened.

Mobile mode

Watch the full process below.