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
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;
}
}
I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.
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.
Hi there, I just quickly add it back to the demo. I am having issues with the plugin that does the highlighting of the code so maybe that was it.
You can grab the main snippet here too https://evolutionsigns.co.uk/megamenus-style-beaver-builder/.
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.
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.
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?
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:(
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?.
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.
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.
Thanks Kevin,
It’s been I while since I did this so will need to look again properly when I have a moment, but I just wondered if you saw this other approach
https://www.beaverjunction.com/flexible-beaver-builder-mega-menus/
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.