Flexible Beaver Builder Mega Menus

This video shows a quick way to create a mega menu using Beaver Builder saved rows, a shortcode, a free plugin and a smidgen of CSS.

In this example we are using the Beaver Builder menu module in a replacement header. This technique also works with theme headers, but you may require additional CSS to overwrite the theme’s styling.

Beaver Builder has it’s own mega menu built in to both the theme and plugin. It is for text links, but can be extended upon with code.   This approach makes building the menus easy and is client friendly and you can add animation and box shadow.

In some circumstances it may require more CSS work to position it responsively.  Unlike the default Beaver Builder menu, I have not found a CSS cheat to make the menu appear to have a full width background.  I open the challenge to others!

 

Steps

  1. install the shortcodes in menu plugin and activate it
  2. Create a saved Row and find the layout ID for it
  3. Insert the the Beaver Builder layout shortcode with ID  in the WordPress menu like below:
[*fl_builder_insert_layout id="890"] (remove *)

Screenshot of the menus

 

Shortcodes In Menus

4. add CSS  below to taste.
5. Enjoy a moment of smugness.

 

/* MEGA MENU CSS*/

.wpcs-mega-menu 
{
	width: 1050px;	
	/*optional - use to move the position of the mega menu*/
	position:relative;
	left:0%;
}

@media (max-width: 1100px)
{
	.wpcs-mega-menu
	{
		width: 900px;
	}
}

@media (max-width: 992px)
{
	.wpcs-mega-menu
	{
		width: 700px;
	}
}


@media (max-width: 860px)
{
	.wpcs-mega-menu
	{
		width: 600px;
	}
}

@media (max-width:768px)
{
	.wpcs-mega-menu
	{
		width: 400px;
	}
}

/*add "mega-shortcode" to the CSS seaction of the parent WP menu item */
.fl-builder-content  .fl-menu .mega-shortcode .sub-menu 
{
	box-shadow: none;
	background-color: rgba(0, 0, 0, 0);
}

Tips

You can add the menus within the menus, but not the same one or the universe will implode.
These unicodes make good pointers ▲ △ (here so you can copy and paste).
The menu may look wonky if resizing the browser. Seems unlikely regular users will do and a refresh sorts it.

Links

https://wordpress.org/plugins/shortcode-in-menus/  (free plugin)
https://www.beaverjunction.com/go/beaver-builder/
https://kb.wpbeaverbuilder.com/article/125-shortcodes-reference
https://davidwaumsley.com/beaver-builders-mega-menu-extended/
https://themer.beaverjunction.com/header-example-with-mega-menu/

david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

6 Comments

  1. Lukas Huggenberg Lukas Huggenberg on September 17, 2020 at 3:48 pm

    Hi David,
    thanks once more for your generosity – sharing this can’t be taken for granted!
    Your instructions have saved me an infinite amount of time.
    Kind regards,
    Lukas

    • David Waumsley David Waumsley on September 18, 2020 at 5:28 am

      Cheers Lukas. This is very much appreciated.

  2. Wayne Sankarlal Wayne Sankarlal on March 31, 2021 at 7:16 pm

    Just came across this and I have to echo Lukas comment – this is just incredible and to be shared freely even more so. Can’t thank you enough Dave.

  3. David Waumsley David Waumsley on March 31, 2021 at 7:21 pm

    Thanks so much Wayne. It’s a bit of a fiddly solution, but I’m really happy you like it. Thanks for taking the time to comment.

  4. Abby Buzon Abby Buzon on January 25, 2023 at 5:23 pm

    David,
    I was just going through and cleaning up Bookmarks and came across the one you did for Mega Menus and went “ooh, I might have a build coming up that could use a mega menu” (in all my builds, I STILL have NEVER done a mega menu!). That one links to http://only.beaverjunction.com/ as the Example Site, which is now extinct, but I found this article linked to in the Comments.
    Primary reason for writing – I just wanted to again thank you for all the amazing tips and tricks over the years that have saved me hours of reinventing wheels!
    Second, Step 5 literally made me laugh out loud. Whenever I pull off some crazy sh!+ and it works beautifully, I seriously do smile and bask in a moment of egotistical pride.

    • David Waumsley David Waumsley on January 25, 2023 at 7:24 pm

      That is so lovely Abby. I really appreciate this. Sorry about the “only” site. Those demos I had were mostly being used by spammers. All the best.

Leave a Reply Cancel Reply