Setup Mega Menu with Beaver Builder Plugin

mega-menu-demo

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 :

  1. Adding some custom class into mega menu items.
  2. Creating a the mega menu layout with Beaver Builder's modules.
  3. Adding this layout to parent menu item(s)

This tutorial is properly tested on three themes: Beaver Builder Theme, Genesis Framework & Astra. For other themes you will need extra hard work in JavaScript and CSS file.

Setting Menu

Adding custom CSS class name into those menu items which will display the menu panel on hover.

  1. Navigate to Dashboard -> Appearance -> Menus page
  2. Select one if you have already or create one for your site.
  3. By default CSS class field is disable. Click on the "Screen Options" button at upper right corner. Check the "CSS Classes" checkbox.
  4. 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.

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. Have you already subscribed the plan? Login at below.

Login

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares