JetMenu is a plugin to organize the website in the most useful and convenient way. Maybe, you have already heard about it and know the main steps to create a mega menu in Elementor.
We have created a detailed guide that can be found in this JetMenu Documentation.
Here is a summary of the needed actions:
- Of course, Download and Install JetMenu to the WordPress.
- Go to Appearance > Menus and fill all needed fields.
- Set up Display Location and Enable JetMenu for this Location.
- Choose the Categories, Posts, Pages, etc., you want to be displayed in the Menu.
- Go to JetMenu Options make all setting and Edit with Elementor.
However, for any website owner is important to make it available on any device. In this tutorial, we will show how to optimize it for mobile devices.
Make your mega menu mobile responsive!
Creating a Responsive Mobile Mega Menu
1Step — Mobile Menu Settings
There are two ways to make the mega menu mobile responsive:
- In WP Dashboard.
- In Elementor.
Let’s figure out the first variant.
2Step — WordPress JetMenu Settings
To style up the mobile mega menu, just go to WordPress Dashboard > JetMenu > Mobile Menu. Here you can set Toggle text color, background color, container, and cover backgrounds.
Set the breakpoint between the desktop menu and the 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 a mobile version of the mega menu.
3Step — Mega Menu Mobile Responsive settings in Elementor
As was mentioned, it is possible to set the mobile mega menu in Elementor as well.
Go to Crocoblock > Library > Header > Edit with Elementor, press Edit Mega Menu and then go to
There are the same options as in the WordPress JetMenu Settings. To check how the menu will look like on the mobile devices, just scroll down and in the end, you will find the Responsive Mode Option, click on it and choose the mobile preview.
4Step — Save/Update
It is very important not to forget to press Save/Update Button, otherwise, the changes will not be saved and displayed.
Well, we are sure you want to look at it in action: