MegaMenus with style for Beaver Builder

Disclaimer This is the first decent sized tutorial I've written for a while so bear with me (it may get away from me).

From Version 1.5 Beaver Builder (an excellent page building plugin) has had the capability to turn your WordPress menus into "MegaMenus" but the results were never really fantastic.  While doing some work on the Evolution Signs website, I had a sudden inspiration to spruce up the information menu.

This tutorial will require some copy and paste of code into your theme's functions.php file and one line of CSS (if you want to show descriptions in your menus) but apart from that, everything is quite simple 🙂  I'm assuming that you are using the Beaver Builder theme, if this is not the case, you may need to tweak the CSS a little to get it looking right.

megamenu

MegaMenu Activate!

From your WordPress Admin page go to Appearances > Menus and select the menu you want to work on (or create a menu if you haven't already).

From here, select the top level element you want to contain the Mega-Menu and add the class mega-menu to the field marked "CSS Classes (optional)"

mega-menu-activate

Which will leave you with something like this (If you have submenu elements they will be listed below each of the headers, but that's not what I was after)

mega-menu-default

this isn't bad; if you are after a basic Mega-Menu then feel free to stop the tutorial here.  However, if you would like something different, please continue...

Menu Item Descriptions

Time to push the envelope a little - lets add some sub-titles to our Menu.

I've been working with WordPress since it was first released, and have amassed quite a library of code snippets - most written by myself, but some harvested from tutorials on the web.  I honestly can't remember if I wrote the following code.  If you wrote it, then please let me know and I will add a credit.

Copy and paste the following code into your theme's functions.php file (safest option is to paste it at the very bottom)  this code looks for Menu Descriptions and outputs them as part of the menu output code in WordPress.

class Menu_Subs extends Walker_Nav_Menu {
 function start_el(&$output, $item, $depth, $args) {
 global $wp_query;
 $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
 
 $class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
 $class_names = ' class="' . esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
 $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
 $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
 $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;
 $item_output .= '<a'. $attributes .'>';
 $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
 $item_output .= '<br /><span class="sub">' . $item->description . '</span>';
 $item_output .= '</a>';
 $item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 }
}

function add_header_menu_walker( $args ) {
 if($args['theme_location'] == 'header') {
 return array_merge( $args, array(
 'walker' => new Menu_Subs
 ) );
 }
 return $args;
}
add_filter( 'wp_nav_menu_args', 'add_header_menu_walker' );

Now, let's add some descriptions to our menu items back in Appearance > Menus:

Mega-menu-Add-Description

Tip If you can't see the description fields - Click on screen options in the top left and make sure that the "Description" field is checked.

Mega-menu-show-descriptions-fields
mega-menu-with-descriptions

Save your menu and navigate to your site to have a look, if it worked then slap yourselves on the back; you now have a Mega-menu with descriptions!

If you would like to style the description text, simply add a new CSS style entry in your stylesheet like this (Obviously, change the style as needed):

span.sub{font-size:0.7em; font-weight:400; line-height:0.9em;}

Icing on the cake

For the finishing touches, it is easy to add icons to your menu using the excellent FontAwesome library which is included with Beaver Builder.

Again, visit Appearances > Menus and edit the Title of the menu item you wish to add an icon to, adding the following html:

<span class=" menu-icon fa  fa-question-circle">   </span>

The icon can be changed by altering the underlined section of the code, referencing the very handy FontAwesome Cheat Sheet

You can also animate your icon by adding the class fa-spin or enlarge the icon using the class fa-2x (up to fa-5x)

 

mega-menu-icon-entry

Take a look at your page and you should have something similar to the following:

megamenu

Congratulations

We made it! - hopefully I didn't lose anyone on the way - if so, please contact us and I will try and guide you back to the path 🙂

 

I hope this will be useful for someone - I've really enjoyed doing it, and hope to be able to make more tutorials in the near future.  If this helps you with a project, feel free to leave a comment (donations also welcome to top off the coffee pot 🙂 )

  1. John on 18th June 2016 at 10:34 pm

    I have been looking to do more with menus and this is great. I am new to all this WordPress stuff so am on a steep learning curve. This will help heaps. Well done.

    • David Woodthorpe on 26th June 2016 at 3:30 am

      I’m glad this was of help to you John.

      Let me know if you need help with anything.

  2. piet wolthaar on 14th February 2017 at 4:56 pm

    Hello i have used it on a dev. site voorbeeld.onderderodeparaplu.nl i have removed the styling, my problem is on a tablet iPad, multiple devices
    when i clik the menu shows, but when i click outside the menu, the menu still there, same on this demo

    i have ask BB but maybe you got an idea

    Br Piet

    • David Woodthorpe on 21st February 2017 at 11:25 am

      To be honest Piet, I haven’t really tested this on an iPad yet but will take a look and get back to you (I have an iPad in for repair at the moment, so your timing is perfect 🙂 )

    • David Woodthorpe on 21st February 2017 at 11:26 am

      Are you using Safari?

Leave a Comment