A mega menu is typically defined as a drop down interface that is triggered by the user hovering over a parent menu item in WordPress. This drop down usually shows all options in one main, mega-panel and oftentimes groups related topics into categories.
Someone asked me how to create the mega menu with Beaver Builder plugin only (no other third party plugin).
In this tutorial I am showing how you will build a responsive mega menu panel with Beaver Builder plugin only (do not need any extra third party plugin).
I am :
- Adding some custom class into mega menu items.
- Creating a the mega menu layout with Beaver Builder's modules.
- Adding this layout to parent menu item(s)
Adding custom CSS class name into those menu items which will display the menu panel on hover.
- Navigate to Dashboard -> Appearance -> Menus page
- Select one if you have already or create one for your site.
- By default CSS class field is disable. Click on the "Screen Options" button at upper right corner. Check the "CSS Classes" checkbox.
- Now adding the unique custom class to any menu item like attached image. I added two class into 2 menu items. Because I want mega menu panel for these two menu items.