Knowledge Base
/
JetMenu: How to Setup Mega Menu for Mobile View
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 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.
We have created a detailed guide that can be found in this JetMenu Documentation.

Here is a summary of the needed actions:

  1. Of course, Download and Install JetMenu to the WordPress.
  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. 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 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 WordPress Dashboard > JetMenu > Mobile Menu. Here you can set Toggle text color, background color, container, and cover backgrounds.

Mobile Menu Settings
NOTE! In WP Dashboard > JetMenu Setting > General you can find a Breakpoint option (px) that helps to choose on what screen size the menu should roll up in hamburger.

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.

Mobile Breakpoint

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 Styles, scroll down and you will see Mobile Menu Settings.

Edit Mobile Menu

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.

Responsive Mode
Mobile Preview in Elementor

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:

Mobile Menu in Action