Setup Mega Menu with Beaver Builder Plugin


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.



  1. Branden Tolle on April 21, 2021 at 1:51 am

    Ah, now i see this doesn’t work with themer, is it possible to change this code somehow to work with a themer header? please advise, many thanks!

    • Branden Tolle on April 21, 2021 at 2:30 pm

      For anyone else stuck with the same problem, I ended up scrapping this method in favor of a method involving a plugin called “Shortcode in Menus”. a lightweight plugin that let’s you use a bb shortcode of a template or saved row as a sub-menu. A little CSS styling and you’re done. lookup David Walmsley’s tutorial on it if you get stuck on the CSS to get it to work well responsively.

  2. MARK KUBALA on August 24, 2020 at 10:36 am

    The JS file seems to only address the first mega menu “accessories” how do you manage the additional mega menu of “men-collection.”? Do you create separate files for “men-collection” or can it be combined into one file?

    • MARK KUBALA on August 24, 2020 at 10:47 am

      Nevermind. My mistake.

  3. gareth on March 22, 2019 at 7:25 pm

    Thanks for this tutorial, I learnt a lot.

    At this stage I can get this working with the BB Theme menu which was probably the intention.
    However it does not work using a menu inserted with Themer. There seems to be a conflict with all the menu rows expanded and visible.

  4. on March 1, 2019 at 6:40 pm

    You can turn standard drop-down menus into mega menus in the Beaver Builder Theme, as shown in this screenshot.

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials