Back to contents

JetMenu: How to Setup Mega Menu for Mobile View

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:

  1. Of course, Download and Install JetMenu to theWordPress.
  2. Go to Appearance > Menus and fill all needed fields.
  3. Set up Display Location and Enable JetMenu for this Location.
  4. Choose the Categories, Posts, Pages, etc., you want to be displayed in the Menu.
  5. 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:

  1. In the WP Dashboard.
  2. 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!

Mobile Menu dashboard

The first section is an Options section. Here you can select the layout, container position, primary mobile view, before and after items content.

Options section 1
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.
mobile view

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.

Options section 2

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.

Toggle styles

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.

Container styles 1

Moreover, there are such standard settings as width, background color, container border settings, box shadow, padding, and radius.

Container 2

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.

Item Styles 1

Also, you can enable items icon and change its appearance.

Items Styles. Icon

What is more, you’ll be able to enable items badge and style it up with a lot of different settings.

Item Styles. Badge

There are also style settings for the Dropdown Icon Styles, such as icon, color, and size.

Dropdown Icon Styles

And the last section is Advanced Styles where you can choose loader color and the cover background color.

Advanced Styles

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.

General Settings for the mobile

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.

Mobile Layout in the Elementor

A really cool option here is the ability to make your menu primary. Let’s see how it works:

Primary mobile view gif

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.

Style settings for mobile

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.

Responsive Mode
Responsive mode option example

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:

Mobile Menu on desktop

And here how it looks on mobile:

Mobile Menu on mobile

Congrats! Now you know how to create an awesome mobile menu for your website with the help of the JetMenu plugin.