Before reading about the individual settings and structure, the main workflow to creating a mega menu is the following..
Add a mega menu component to the page from the list of components (will appear empty on the page)
Add mega dropdowns inside of this mega menu, depending on how many you need.
Choose the default width of the dropdowns from the mega menu settings (these can be changed individually from each dropdown settings also)
Place any elements inside each dropdown to populate them with content or choose ‘no dropdown’ where you just need links.
The slide menu component is useful to add menu items directly from any WP menu (choose mega menu list from the slide menu settings to prevent the sliding sub menus)
Style the dropdowns globally from the mega menu settings or individually from each dropdown settings.
In the mega menu mobile settings, select the width where you want the mobile menu to kick in.
Add a burger trigger component somewhere inside of the header to be the trigger for the mobile menu.
Menu Mega Structure
Regardless of which mega menu type you’re creating, the overall HTML structure is the same and it’s useful to become familiar with the structure for the some of the settings to make sense.
1. Mega Menu
The mega menu component itself is the container for the whole thing, to be added to the header builder inside a header row (wherever you want the menu to be positioned when viewing on desktop screens).
Leave a Reply