Skip to content

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!

Leave a Comment





Do NOT follow this link or you will be banned from the site!