Beaver Builder’s Mega Menu Extended

Setting up a Beaver Builder Menu
(only for Pro and above users)

Mega Menus were added to the Beaver Builder theme in version 1.5.
Instructions on setting up a Beaver builder Mega menu are here.
Here are a couple of examples  with the default  mega-menu set ups:
PowerPack Demo
Ultimate Addons Demo

The example site in the video

Now to Extend Beaver Builder’s Mega Menu

As in the video above I make the Beaver Builder Mega Menu full width, add text, images and shortcodes. Shortcode are not recommended as they can conflict with the menus CSS styles and can slow sites more than using HTML.

Makes Beaver Builder Mega Menu full width

This only creates the appearance of being full width with a CSS hack using a CSS pseudo element.  Add to the Beaver Builder Theme’s style.css file (at the bottom). Min-width is set to 768px the standard Beaver Builder setting. Adjust if changed.

@media (min-width: 768px)
{
/*This is just removing some default styles(not required)*/
 .fl-page-nav UL.sub-menu
 {
 padding: 10px 0;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 border: 0;
 background: none;
 }

 UL.navbar-nav LI.mega-menu> UL.sub-menu:after
 {
 content: "";
 display: block;
 position: absolute;
 left: 50%;
 top: -1px;
 height: 100%;
 width: 100vw;
 transform: translateX(-50%);
 z-index: -1;
 box-sizing: border-box;
 /*These styles are replacing the BB style that are being over written above (not required)*/
 border-top: 1px solid #DEDEDE;
 /*+box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.4);*/
 -moz-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.4);
 -webkit-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.4);
 box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.4);
 background-color: #F6F6F6;
 }
}
 

Adds a description area to WordPress Menus

The following three snippet should be added the Beaver Builder Child Themes functions.php file. Add to the bottom if uncertain. Updated to work with Menu Modules.

// adds descriptions to menus
function prefix_nav_description( $item_output, $item, $depth, $args ) {
 if ( !empty( $item->description ) ) {
 $item_output = str_replace( $args->link_after . '</a>', '<p class="menu-item-description">' . $item->description . '</p>' . $args->link_after . '</a>', $item_output );
 }
 
 return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

Allow HTML in the description area to WordPress Menus

// Stop WP removing HTML in Menu description area


remove_filter('nav_menu_description', 'strip_tags');

add_filter( 'wp_setup_nav_menu_item', 'cus_wp_setup_nav_menu_item' );

function cus_wp_setup_nav_menu_item($menu_item) {

$menu_item->description = apply_filters( 'nav_menu_description', $menu_item->post_content );

return $menu_item;

}

Allows Shortcodes in the description areas


// allows shortcodes in the menu 
//(not recommend as BB styling is often lost and it use more server resources than HTML)

add_filter('wp_nav_menu', 'do_menu_shortcodes'); 
function do_menu_shortcodes( $menu_item ){ 
 return do_shortcode( $menu_item ); 
}

Finishing Touches

This next snippet stops non linking text from changing color when hovered over. It is set to black here.

/*this is placed in style.css to overwrite the CSS in the theme*/
.fl-page-nav-wrap A:hover, .fl-page-nav-wrap A:focus, .fl-page-nav-wrap A:hover *, .fl-page-nav-wrap A:focus *, .fl-page-nav-wrap A.fa:hover, .fl-page-nav-wrap A.fa:focus
{
 color: #000000;
}

This to hides menu items you don’t want to show in your mobile navigation. You will need to add mobile-nav-header to the CSS of the menu item


@media (max-width: 768px)
{
 UL.navbar-nav LI.mega-menu .mobile-nav-header>A
 {
 display: none;
 }
}
DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

11 Comments

  1. Haoming Haoming on 14th January 2017 at 1:27 am

    Hi David, thank you for your video and the blog post. But the menu descriptions are not there now at the demo site. I also tried it myself with the latest WordPress v4.7.1 and the latest Beaver Builder theme, still unsuccessful. Well, it is working well at https://evolutionsigns.co.uk, and it is also running WP v4.7.1 according to Wappalyzer. Could you please fix it at your demo site and let me know how? Thank you very much.

    Besides, there are a duplicate definition of class Menu_Subs and function add_header_menu_walker in the PHP code snippet in your post above.

  2. Haoming Haoming on 16th January 2017 at 11:36 am

    Thank you for your response, David. I just got time working it out today. Now it is working as expected in my environment.

    It seemed that $menu_item->description was cleared by some other plugins / some configurations of a certain plugin when I had the problem. It started working after I uninstalled some unnecessary plugins I played around with, such as Mega Main Menu.

    I tried to pinpoint the reason but failed, because I did not back up the database although I have code backups in a git repo. Lesson learnt as a beginner of WordPress, I started to use UpdraftPlus.

    Thanks again.

    • David Waumsley David Waumsley on 16th January 2017 at 1:52 pm

      Thanks for letting me know Haoming. You sound like you know your stuff. Well, anyone who says “I have code backups in a git repo” impresses me! I thought I heard that the github server went down yesterday.

      UpdraftPlus is a good choice. Pleased you got it fixed. All the best.

  3. Nicole Vlug Nicole Vlug on 21st June 2017 at 8:18 am

    Hi David – awesome stuff – all went well except the descriptions are big and bold like the menu items – which looks confusing to view…I am sure I saw someones customised mega menu with the descriptions in a smaller non bold font… how can I do this?

  4. KATELYN TRULOVE KATELYN TRULOVE on 7th May 2019 at 7:50 pm

    Have you had reports of the full-width css code not working anymore? I used it on a site a while back and it worked wonderfully so I referred back to it for a new site and it doesn’t seem to work:(

    • David Waumsley David Waumsley on 8th May 2019 at 5:04 am

      Hi Katelyn, Sorry to hear :-(

      I have not heard anything, but I used it here and it seems to be OK: https://only.beaverjunction.com/ (this has everything up-to-date on it). Is the CSS safe in the child theme?.

  5. Scott Rimell Scott Rimell on 26th October 2019 at 4:15 am

    David, love the demo! I got this mega menu most of the way accomplished, but I am still having issues getting it correct. The full width seems to be a problem.

    It seems I cannot get the left and right positions correct for each menu (the first two seem to be ok, but not the third). Also, I can’t get the width of the columns correct for the different sized menu items I have created. I have tried all kinds of things; adjusting the left 0% in the CSS, adjusting the @media sections, trying to code the CSS of the actual node… I’m just not having success.

  6. Kevin Maines Kevin Maines on 21st April 2020 at 4:14 pm

    David, thanks so much for this code!

    I’m wondering what would I need to change so the description goes above the nav item. (I’d like to use the description to insert images above the nav items)

    I tried changing “link_after” to “link_before” but it didn’t work.

  7. james smith james smith on 26th June 2020 at 4:49 am

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts and gain some useful knowledge. I really appreciate that.

Leave a Comment