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.
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
- install the shortcodes in menu plugin and activate it
- Create a saved Row and find the layout ID for it
- 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
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/
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
Cheers Lukas. This is very much appreciated.
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.
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.
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.
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.