How to create a Mega / Column Menu

MEGA MENU

Overview

mega-menu-overview
The Mega Menu allows you to create a expandable menu with many different design options. This type of menu's can be useful for displaying other sub-pages your website may contain or any other widget of your linking.

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-1

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 it's parent row .
  • 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 will remove link of the menu item.
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.

Editing the Mega menu

Creating a memorable mega menu is not just about enabling but also designing the mega menu. Below are the steps to start editing the mega menu content.
  • 01 : In the editor click on the menu item for which you have enbled the mega menu option. ( One way to identify is the menu item with symbol beside it)
  • 02 : After the mega menu container appears click on the widget you wish to edit.
  • 03 : From the sidebar select the options and design you want to apply to the widget.
NOTE -In advance option tab . Do more styling to the Widgets. To know more about advance option tab. CLICK HERE
NOTE -If you change it from Mega Menu to another, the Mega Menu content will be deleted on update post.

COLUMN MENU

Overview

The Column Menu allows you to create a expandable menu with a columns representing the sub menues of the menu items and also design the way it looks.

Steps to enable Column menu

  • 01 : Make sure the menu structure of the website is in order you want it to be displayed.
  • 02 : Open Primary menu option in the primary menu widget settings .
  • 03 : Select the menu item for which you want to enable the column menu option.
  • 04 : Select the column menu option from the menu type.
column-menu-1

Column menu options

Column count
  • It represents the number of columns you want to display inside your column menu container.
Column gap
  • Column gap inserts space in between the columns.
Note : The mega menu setting for the container apply to the column menu as well.

Designing the Column menu

To design the column menu container you can give the design form the Submenu Style section of the primary menu widget.

column-menu-2
Was this page helpful?