Creating a responsive mobile mega menu with JetMenu for Elementor

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.

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.

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.

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.

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.

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.

Watch the full process below.