Normal Nav Menu

Mega Menu

Test 4 is mega menu the submenu (Test 4.1) won’t be visible because it’s been replaced by the mega menu. To make the mega menu span the whole page :
  1. Go to Jet Plugin Setting > Jet Menu > Desktop Menu
  2. Mega Menu Base Width : Width Same as Custom CSS selector Width
  3. in Mega menu width selector, put : .elementor-section-wrap

Features

Each menu in mega menu can have a custom icon and / or badge (see Test4).

When creating menu, save it, then there will be a “JetMenu” button when you hover the menu. 

In the menu, you can set custom icon & badge for the menu.

If you want the menu to show a custom content instead of it’s usual submenu, toggle the Mega submenu enabled and click Edit Mega Menu Item Content to start editing the menu.

In the widget itself, other than the icon & badge, you can’t customize the text color, or padding for each item itself Except the First & the Last Menu 

In Mega Menu > Style > Desktop Menu Item > Main Menu Items Custom Style, there’s a toggle where you can customize Only the first and / or the last item in the menu if you want to make it eye catching.

Animating hover

Since mega menu doesn’t have any hover animation add this to the widget Advanced > Custom CSS:

selector a{
transition-duration:0.5s;
}

Changing Hover Text Color on First item / Last item

if you want to change the hover text color of the menu, just add custom css :

selector li:first-child div{
  color:green;
}

If you toggle off Roll up on jet-menu (explained below), you can use the :last-child pseudo element to target the last child

, but if you let it by default, jet menu will create an invisble last <li> element to store the roll up, so you need to target :nth-last-child(2) instead (second last child)

Jet Menu Behavior on Roll up

In Crocoblock > Jet Plugins Setting > Jet Menu > Desktop Menu, there’s the Menu RollUp Toggle, if this is turned on, then the mega menu won’t show second row if the menu is too long, it will just create an ellipsis with all the remaining menu as the drop down. (This is responsive)

Otherwise, it will show the menu on the next row (normal nav menu behavior)

The way they hide the menu is dynamically adding the html attribute hidden=”hidden” to the <li> element that are being hidden, you can override this using css by li {display:block} in case you want some mega menu to be rolled up and some don’t.

Vertical Mega Menu

Test1
Test 1.1
Test 1.1.1
Test 1.1.2
Test 1.2
Test2
Test 2.1
Test 2.1.1
Test 2.2
Test 2.3
Test 2.4
Test 2.4.1
Test 2.4.2
Test3
Test4Boom

Hamburger Menu

Unlike Hamburger Panel from Jet Blocks, Hamburger menu don’t have the Zoom in / Fade Effect. Only Slide / the normal drop down