This detailed tutorial will teach you how to create a responsive mobile mega menu with the help of the JetMenu plugin.
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.
Here is a summary of the needed actions:
- Of course, Download and Install JetMenu to theWordPress.
- 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. A really great thing is that you can create a separate menu for desktop and mobile.
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 the 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 JetPlugins Dashboard > JetMenu Settings > Mobile Menu. Here you’ll see different sections to style up the mobile menu according to your preferences. Let’s have a closer look at them!
The first section is an Options section. Here you can select the layout, container position, primary mobile view, before and after items content.
NOTE! In the Desktop Menu block you can select how your menu will look on desktop and mobile devices. Check the Device View setting shown below.
Also, you can choose toggle close and open state icon, toggle text, menu close and back icon and back text. A really great option here is an opportunity to enable breadcrumbs and even choose an icon for breadcrumbs divider. This option allows you to display navigation through the menu.
The next section is the Toggle Styles. Here you can choose the icon color and size, select the background color, enable the toggle border and box shadow setting, customize padding and border radius.
In the third section, you can change the Container Styles. or example, close/back button color and icon size, breadcrumbs text color, divider color and icon size and even text typography.
Moreover, there are such standard settings as width, background color, container border settings, box shadow, padding, and radius.
The fourth section is Item Styles where you can choose settings for the normal and active states for the mobile menu. You can change label color, typography settings, show item description and enable items divider.
Also, you can enable items icon and change its appearance.
What is more, you’ll be able to enable items badge and style it up with a lot of different settings.
There are also style settings for the Dropdown Icon Styles, such as icon, color, and size.
And the last section is Advanced Styles where you can choose loader color and the cover background color.
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 General section where you’ll be able to select the Menu for Desktop and the Menu for Mobile. This is really awesome because you can create two different menus and style them up as you like.
Now let’s proceed to the Mobile Layout section. These section settings are similar to the settings in the JetMenu Settings in the Dashboard, but if you want to see what you’re changing and how the menu looks like, then it will be better to customize the menu in the Elementor editor.
A really cool option here is the ability to make your menu primary. Let’s see how it works:
In the Style section, you can select different settings for the desktop and mobile. As you can see, the style settings for the mobile are the same as in the Dashboard.
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!
So, let’s check how the menu will look on desktop:
And here how it looks on mobile:
Congrats! Now you know how to create an awesome mobile menu for your website with the help of the JetMenu plugin.