On the menus dashboard (admin page -> Appearance -> Menus) you can build your mega menu. Therefore you need also the “CSS Classes” and “Description” fields. This two fields can be activated after clicking on “Screen Options” (on the top right) and then checking “CSS Classes” and “Description” under “Show advanced menu properties”.
With the mega menu you have following three possibilities for the main menu items:
- Dropdown menu
- Just build your menu as you’re already used to. Create submenus, subsubmenus… The mega menu will handle them all correctly.
- Mega menu with custom content
- Create a menu item and write the content into the description field. You can also use shortcodes for example to include a static block.
- Mega menu with submenus in columns
- To use this menu type, write a hash (“#”) into the description field of the menu item.
- The first submenu will create a new column in the mega menus content box and is also the title of this column.
- To hide the menu title, use a hash (“#”) for the title of that menu item.
- To remove the link in the menu title, leave the url field empty.
- To add custom content to that column, write your content into the description field. You can also use shortcodes for example to include a static block.
- The subsubmenus will be displayed as list elements in the parents column.
You’re able to change the width of all three possibilities to:
Width of the main element (commonly of the header)
Content width is limited to the width of the container (commonly the headers container)
Width of the parent container of the widget (commonly of the header)
Width of the menu itself
Just add “menu-width / container-width / full-width” to the CSS classes field.
To use the mega menu on front-end, just assign it to the sticky header (on the menus dashboard under “Manage Locations”) or use it as widget in one of your widget areas (for example Header Main).