Back to contents

JetMenu: Main Menu Customization & Style Settings Overview

 

This tutorial will guide you through all settings that are available in the JetMenu Dashboard.

JetMenu is a first-class plugin that allows creating a mega menu with Elementor. Let’s look through all settings available in the JetMenu Dashboard. 

Open your WordPress Dashboard and go to Crocoblock > JetPlugins Settings > JetMenu. You will find three tabs here:

  • General Settings;
  • Main Menu;
  • Mobile Menu.

General Settings Overview

On top of the General Settings tab, you will find tools for creating a preset of current options (Preset Manager), Export and Import options, Reset current options. 

Also, you are free to enable or disable such settings as:

  • SVG images upload status – toggle on this option if you want to upload SVG images;
  • Template Content Cache – lets you use the cache for the Elementor’s templates;
  • Revamp Menu – switches plugin to a newer version with new options and settings; 
  • Cache menu CSS – enable this option if you want to cache menu CSS.

Let’s get a closer look at what the Revamp Menu option does. It’s a keynote feature that solves the backward compatibility problem. When this option is enabled, all settings made on JetMenu Dashboard will apply to menus from WordPress locations only.

To style up any other menu, use the settings from Mega Menu, Vertical Mega Menu, and Hamburger Menu widgets. To check new options of the Mega Menu widget with the Revamp Menu option enabled, follow this link.  

In this tutorial, we will describe all items available in the JetMenu Dashboard settings when the Revamp Menu is enabled. The description of JetMenu settings with this option disabled is available here.

Main Menu Settings

As mentioned before, the settings below work for menus from WordPress locations only.

Thus, you will find three tabs on the Main Menu section:

  • Layout;
  • Main Menu;
  • Dropdown.

Let’s check what settings you can make on the Layout tab.

You will be able to set up:

  • Layout – decide between Horizontal, Vertical, and Dropdown menu; 
  • Sub Position –  position your submenu items to the right / left from the main menu item; 
  • Sub Animation – choose a Fade animation effect for your submenu items, or leave it without animation (None); 
  • Sub Trigger – select a trigger that opens the submenu (Hover / Click); 
  • Sub Target – submenu will be opened by click on the chosen element (Item / Sub Icon). 
  • Breakpoint – by setting this option, you will switch the menu view to a mobile layout;
  • Menu RollUp – activate this option to group extra menu items and hide them under the suspension dots;
  • RollUp Type – select here an item to replace the menu items outside the menu container. It can be Text or Icon
  • Dropdown Icon – allows you to upload a custom icon for the dropdown menu; 
  • Use Mobile Render – this option enables or disables the Mobile Render mode and implies choosing a device for menu rendering – either “Mobile” or “Tablet and Mobile.”

Let’s have a closer look at the Main Menu tab settings.

Container Width – set an appropriate value for your menu container width;

Top Level – you will find tools for customization of typography settings, vertical/horizontal paddings, and items space of top-level menu items; 

Sub Level – the same options are available for submenu items; you will also find a tool for selecting a container color here.

To make your menu more attractive, choose different colors for icons, titles, and badges on different states: Normal, Hover, Active.

The Dropdown menu has the same settings as the Main Menu items. The only new option here is Dropdown Toggle. Set up the Dropdown Toggle size in pixels.

Mobile Menu Settings

Customize your Mobile Menu with the help of options represented on this tab.

In short, you can select the layout, toggle, and container position, Submenu Trigger, templates for header content, Before items content, After items content on the first Options tab. Also, customize Icons, enable Breadcrumbs, show or hide item descriptions, etc. 

All other tabs will help you with styles of Toggle, Container, Menu Items, Sub Menu Icons accordingly. In Advanced Styles, you will be able to choose the Loader color and Cover Background color. 

All these features for Mobile Menu are described in detail in this tutorial. 

That’s all you should know about JetMenu Dashboard settings. Don’t hesitate to try these options and make the site menu even more eye-catching menu.