We now have added a setting for you to add a class name to the top-level item (that triggers your mega menu). This is something many people have asked for to make targeting mega menu elements with CSS easier.

See full changelog below.


We recommend a minimum of PHP 7.4. Compatible with 7.4 and 8.0.

Attention Lifetime License Holders: if you are running version 1.4.1 or earlier, the plugin may not properly recognize your license, telling you that your license expired --  you might need to manually upload the most recent version which should fix this issue for you.

Known Issues

As more people use our plugin and test it with different environments, issues will come up. We'll address them as we are able to but for now, here is a list of issues or conflicts that have been reported:

  • COMMON ISSUE-- you see a square instead of submenu icon: If you have FontAwesome Pro icons enabled in BB Theme, it may mess with the submenu icon in our plugin (and also with UABB Advanced Menu module). To solve this add some custom CSS to override the font family as follows: .brex-mobile-menu-container-node .brex-mobile-menu-container .menu-item-has-children>a::after {font-family:'Font Awesome 5 Pro';}
  • Beaver Builder Mega Menu might not work properly if you have your header set to "sticky" and "shrink." You should not use the "shrink" feature in your headers when you have a mega menu up there.
  • Mega Menu might inherit its width (full vs fixed) from the parent row that contains the module. The same is true of vertical alignment top/bottom/center. This is not caused by our plugin, it's just the way BB works. To try and get around this, you should make sure you have explicitly set whatever style it's inheriting. So for example, if you want your parent row to be vertical-aligned-bottom, but you want your mega menu rows to be vertical-aligned top, don't just leave them at their defaults. You should specifically set those columns to use equal heights and vertical align-top. If setting it explicitly in the row/column settings does not fix it, you might still be able to override it with some manual CSS.
  • Issue when using duplicated rows for mega menu -- Several people have reported odd behavior when the saved row being used for a mega menu is one that they created by duplicating another row. When you create a mega menu, always start with a fresh row.
  • Some modules don't work correctly when placed in a mega menu. For example Posts Carousel and UABB Info Box also Advanced Posts. If you have issues with something not looking right, please replace the module you are using with basic BB text/icon/image type modules instead.
  • If you deactivate your license for any reason it will cause your mega menu to DISAPPEAR. You must have an active license for the mega menu to appear as a module and for the menu itself to render. This can be problematic for cloning a site that uses a single site license. Contact us if you need a temporary increase in the number of supported activations.
  • Posts Module and The Events Calendar: If you have a posts module in your header pulling upcoming events, and if you have The Events Calendar set to use the new template views, it causes all single events to not display. This is a known BB issue. Workaround: be sure to go to Events Calendar Settings > Display and under Events Template choose Default Events Template. [updated versions of Events Calendar and Beaver Builder make this issue & fix potentially obsolete]


If you contact me for support, there are a few things I am going to ask you to try. So you can save us both some time if you can try these before contacting me.

  1. First, check the known issues list to the left <<<. Your issue might be on there (along with a fix if there is one, if not then at least you know you're not imagining things)
  2. Have you cleared all caches? Both the Beaver Builder cache (Settings > Beaver Builder > Tools) and you should also completely disable any other caching plugins, and also try to turn it off at the server level. Cached scripts and styles can frequently cause problems.
  3. Next, do a conflict test. This is hugely helpful in determining what is causing your issue. You need to deactivate all plugins except for Beaver Builder, Beaver Themer, and BB Mega Menu. All other plugins should be disabled. (we assume you are using Beaver Builder theme along with Beaver Themer.) Still have the issue?
  4. Next step, keep everything disabled, but disable Beaver Themer too. Switch to one of the stock WordPress themes (so, deactivate the Beaver Builder theme too) Now, place your mega menu module in the content area of a new, blank test page. So at this point you should be running one of the stock WordPress themes, and the only plugins running are Beaver Builder and BB Mega Menu, and you are on a new blank page that only contains your mega menu module and no other modules. Still have the issue?
  5. Okay now re-activate Beaver Themer and the Beaver Builder theme since that probably was not the problem. It might be one of your modules. 5a) So now go to Beaver Builder > Saved Rows and create a handful of brand new saved rows that only contain basic Beaver Builder photo and text modules in them. Does not matter what the rows say or what they look like, they are just for testing. 5b) Now, go to your test page, and edit your mega menu module (or create a brand new one), and swap out the saved rows that each of your menu items triggers with your new simple test rows. So you should now be on a test page that only contains the mega menu, and your mega menu should only trigger saved rows that have simple text and images. Still have the issue? If so, contact me.

If, at any point in the above steps, you find that it starts working as it should, stop there. You now know that the culprit was one of the things you had to deactivate.

What you should do once you reach this point (where the mega menu works as expected), is to start slowly adding things back in one at a time until you figure out which variable caused it to break.

== Changelog ==

== Changelog ==
= 1.4.3 =
* Improved the code and fixed compatibility issue with other plugins

= 1.4.2 =
* Fixed issue with mobile menu not working properly
* Fix minor issue for PHP 8.0 compatibility
* Adds support for adding custom class to top-level menu items

= =
* fixed enclosing folder name mismatch

= 1.4.1 =
* fixed lifetime license not properly being recognized as valid license
* fixed version numbers not being updated correctly on site

= 1.4 =
* includes a 30 day grace period for expired license before plugin stops working

= 1.3 =
* partial refactor of code
* Adds support for adding top-level menu items able to be their own link on dropdown menus
* Fix rel nofollow property on links
* add default top level item padding on medium screens
* fix minor issue for PHP 7.4 compatibility
* PHP 8 compatibility

= 1.2 =
* Adds support for adding top-level menu items able to be their own link
* Improves tablet/mobile top links to be touch-friendly

= 1.1 =
* Adds support for adding `current-menu-item` to the current menu link.
* Improves rendering for saved rows containing modules that use JavaScript for positioning.

= 1.0.5 =
* Fixes a compatibility issue between other plugins using common names to generate cryptographic nonces.

= 1.0.4 =
* Fixes an issue where updating the plugin on a site using a transient object cache would result in an error.

= 1.0.3 =
* Fixes a compatibility issue between other plugins using EDD.

= 1.0.2 =
* Improves clarity of error message when attempting to activate plugin on unsupported versions of PHP.

= 1.0.1 =
* Fixes an issue where animations bound to the window didn't trigger after page load.

= 1.0 =
* Initial release.

Handy tip:

Want your mega menu to look connected to the top-level item that triggered it? Here's some CSS you can use to create a little arrow that connects the two. Feel free to change as you need.

/* little arrow connecting mega menu to trigger item */
ul.brex-mega-menu .mega-menu-saved-row-a {position:relative;}
ul.brex-mega-menu .mega-menu-saved-row-a:hover:after {content:"";
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
	position:absolute; left:40%; bottom:-2px;

Have some of your own customizations to show off?