How to create a Mega menu

Overview

The Mega Menu Widget allows you to customize your menu to a even more impressive design by adding an inner row under the menu which is visible when hovered on the menu options with the mega menu enabled.

Steps to enable Mega menu

01 : Open Primary menu option in the primary menu widget settings .
02 : Select the menu item for which you want to enable the mega menu option.
03 : Select the mega menu option from the menu type.

Mega menu options

Mega Width
  • Menu Container - The mega menu container adjusts to the width of the primary menu.
  • Row Container - The mega menu container adjusts to the width of the row inside with the primary menu is placed.
  • Custom - The mega menu container adjusts to width set in the Mega Custom Width.
  • Icon
  • Select the icon you want to show along side the menu item title.
  • Menu item Setting

    Disable Link
  • Disable link toggle prevents direction to the page which the menu item represent.
  • Hide Text
  • The hide title toggle will hide the menu item title.
  • Icon Position
  • The icon position setting can set the position of the icon to the left or the right of the menu item title.
  • Highlight Label

    Highlight Label
  • The highlight label takes the input and represent it as a label along side the menu item title.
  • Background Color
  • It represents the background color of the label.
  • Color
  • It represents the color of the text in the label.
  • Inserting Inner row in Mega menu

    Method 01
  • You can duplicate the inner rows from inside the primary menu option of the primary menu widget by navigatin to below settings.
  • Primary menu widget >> Primary menu option >> Menu item (One with the megamenu enabled) >> Inner Row (Click on the duplicate icon )
    Method 02
  • To insert a inner row you can also use the option.
  • NOTE - Widgets with drag and drop restricted >> Inner row

    Inserting Different Widgets

  • You can insert all the different widgets simply by dragging and dropping them from the sidebar to the container you want theme to insert theme into.
  • Was this page helpful?