From the WordPress admin panel, click Appearance > Menus.
Scroll down to your menu items and open the top-level menu item whose nested menu items you would like to turn into a mega menu.
In the screenshot below, the target top-level item is Services.
In the CSS Classes field, enter mega-menu, as shown in the screenshot. (If you don’t see this field, in the upper right corner, click Screen Options and make sure the CSS Classes checkbox is selected.)
All of the menu items nested below the top-level item will be converted into a mega menu instead of a standard drop-down list.
Note
The mega menu is automatically disabled with the mega-menu-disabled class if the mega menu width exceeds that of the menu container. For full Bootstrap 4, the container width limit is 960px.
To hide a mega menu column heading:
-
On the Appearance > Menus page, scroll down to a nested menu item whose heading you want to hide.
-
In the CSS Classes field, enter hide-heading.
For more information and some CSS to make common adjustments, such as making it full-width, check out this blog post:
https://davidwaumsley.com/beaver-builders-mega-menu-extended/
2017 Full-Width updated CSS: https://themer.beaverjunction.com/header-example-with-mega-menu
This video walks through how to include descriptive text and images within the mega menu: https://www.youtube.com/watch?v=TqgVe8-gH_I
This is a follow-up video by the same author talking about changes to the code in the blog post above:
https://www.youtube.com/watch?v=zJWwDKfsBuI