Changing a Submenu to a Mega-menu with Beaver Builder

Code Snippet Related Categories

Reason for needing the Code Snippet

Sometimes you want to present a navigation menu as a horizontal “mega-menu” instead of a hierarchal dropdown menu. This is really simple if you are using Beaver Builder. The mega-menu feature is built in, but is unfortunately hidden. You have to know the secret to turn it on.

(This post was viewed 815 times) in the last month.)

What the Code Snippet does

Converts a submenu dropdown to a full-width horizontal mega-menu.

What the page looks like Before and After

Here's the Code Snippet


  • Step 1: make sure you turn on the CSS Classes in Screen Options when viewing your WordPress Menus
  • Step 2: for the parent menu item (for the submenus you want to be mega-menu) add "mega-menu" as the CSS Class (no quotes) In this example the Parent Menu Item is "Categories"
  • Step 3: Save your Menu
  • Step 4 if you want the mega-menu to be full width, then add the following CSS and tweak as necessary:

UL.fl-menu-horizontal LI.mega-menu > UL.sub-menu:after
 content: "";
 display: block;
 position: absolute;
 left: 50%;
 top: -1px;
 height: 101%;
 width: 100vw;
 transform: translateX(-50%);
 z-index: -1;
 box-sizing: border-box;
 border-top: 1px solid #efefef; 
 background-color: #efefef;
 /* This is for full width shadow.
 You need to turn off "sub-menu drop shadow" in the menu module.
 Remove this if not needed. */
 -moz-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
 -webkit-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
 box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451); 


Limit search for phrases by using " " around the phrase

Subscribe to Code Snippet updates

You will get an email the morning after we post a new Code Snippet

Something went wrong. Please check your entries and try again.

Other Recent Code Snippets

Post Format: Aside

Posted in

“I never tried to prove nothing, just wanted to give a good show. My life has always been my music, it’s always come first, but the music ain’t worth nothing if you can’t lay it on the public. The main thing is to live for that audience, ’cause what you’re […]

Read More

Post Format: Status

Posted in

WordPress, how do I love thee? Let me count the ways (in 140 characters or less).

Read More

Post Format: Link

Posted in

The WordPress Theme Review Team Website

Read More

Post Format: Quote

Posted in

Only one thing is impossible for God: To find any sense in any copyright law on the planet. Mark Twain

Read More

Post Format: Chat

Posted in

Abbott: Strange as it may seem, they give ball players nowadays very peculiar names. Costello: Funny names? Abbott: Nicknames, nicknames. Now, on the St. Louis team we have Who’s on first, What’s on second, I Don’t Know is on third– Costello: That’s what I want to find out. I want […]

Read More

Pieter Hartsook

WordPress website coaching, design, implementation, support, and training. Background in Marketing Research and Communications. See my profile at:

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to content