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 219 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

Bulk remove posts from category 1

Bulk remove posts from category

Posted in ,

After creating a child category I wanted to remove the parent category from 30 posts. I finally searched for “how to remove a post category in bulk edit in wordpress” and and lo and behold the second result led me to this plugin. It works perfectly. I’m only sorry I […]

Read More
wizard of oz lions, tigers, and bears

Privacy, Cookies, & ADA Compliance — Oh My!
— Privacy Pt. 1

Posted in , , , ,

With more and more privacy laws on the horizon, we advise all of our clients to not only have a Privacy Policy in place but also have a strategy to keep it up to date with newly required disclosures. An up to date Privacy Policy can help you avoid significant […]

Read More
Elementor vs Beaver Builder review

Elementor vs Beaver Builder review

Posted in , , ,

I came across an Elementor vs Beaver Builder comparison review that was published in August 2020. While I am pretty biased in favor of the Beaver Builder platform the reviewer seemed to favor Elementor. If you are trying to decide which page builder platform to use I’d encourage you take […]

Read More
Mix and Match your RSS feeds 2

Mix and Match your RSS feeds

Posted in , , ,

Ever want to provide your readers with email updates to your website? WordPress’ built in RSS feed functionality provides an easy way to provide the content to email newsletter services like Mailchimp or Mailerlite. But what if you want to create email updates that don’t include all your new posts, […]

Read More
Online GIF tools for regular and animated GIF images 6

Online GIF tools for regular and animated GIF images

Posted in , ,

I made an animated gif screenshot recording to demonstrate a code snippet, but I wanted to resize the image and make it loop. I found a useful website that has easy tools to do that. I reduced the size by 50% and made it auto-loop 30x. Then optimized it to […]

Read More
When should I NOT use WordPress for a website 9

When should I NOT use WordPress for a website

Posted in , , , ,

click the green switch at the top of the screenshots to compare the WordPress vs the Static HTML versions of the same website the static version is live at: http://halcyonlearning.com/ (This post was viewed 131 times) in the last month.)

Read More

Popular Posts


Pieter Hartsook

WordPress website coaching, design, implementation, support, and training. Background in Marketing Research and Communications. See my profile at: https://www.linkedin.com/in/hartsook/

Reader Interactions

Leave a Reply

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

Skip to content