In this article we're going to look at a few ways to add a “real” mega menu to the Oxygen Builder. The built-in menu components are good for simple menus when creating headers with Oxygen, but if you want true megamenu functionality, it's best to look elsewhere.

In this article, we are going to discuss how to add a mega menu in Oxygen.

What’s A Mega Menu?

If you've ever used a menu on a website that contained something more than links, that's what a megamenu is. They vary in complexity, ranging from simple image icons to dynamically populated areas.

They can have single column layouts, multi column layouts, multiple rows, masonary archives, and more. Of course, you don't want to get to complex, because that's what pages are for.

If done correctly, they can make the navigation of the website a lot easier for your visitors.

Oxygen allows you to create simple dropdown menus, but when it comes to the megamenu functionality, you're not left with many options.

How To Add A Mega Menu To Oxygen

This article is going to take a look at two major ways to add a megamenu to Oxygen. The first way can be done completely in Oxygen without any third party add-ons. This is good for simple menus. It follows steps from a tutorial published by the official team behind Oxygen. This is the method that they used to create the dropdowns seen in the Oxygenbuilder.com site.

The second option uses a third party plugin that gives you a lot more functionality when it comes to mega menus in Oxygen Builder. If you're looking to create multi column, dynamically populated menus, this is your best bet.

Of course there are additional options which can be used if you have a good understanding of HTML, CSS, JavaScript, and perhaps PHP. However, that's out of the scope of this article. If you're familiar with it though, it could be a good third option of incorporating a mega menu in Oxygen, which wouldn't require a third party plugin.

Natively Adding A Mega Menu In Oxygen

This section will run through the basic steps discussed in the YouTube tutorial. If you're looking to implement this type of menu on your own website, we recommend reading the official tutorial and watching the above YouTube video.

To natively add a megamenu in Oxygen, you first need to create the initial menu items. This isn't done with the menu component, instead it's done by creating divs, populating them with text, and wrapping them in links. This is fairly easy to do with Oxygen.

Once the initial menu is there, it's time to create the dropdown megamenu.

This is done by creating a div below the menu link which will contain all of the content in the dropdown. Once the dropdown div is created (watch the video to understand the actual structure behind it) It is positioned absolutely and toggled to be visible when hovering over its respective menu link.

The implementation of this mega menu is fairly simple, especially if you follow the YouTube tutorial. It allows you to use any block available to you in the Oxygen Builder. You can also make use of the built in conditional visibility features to show and hide things based on user roles.

However, adding this megamenu takes a little work and when the structure gets complex, the implementation does as well. It's also a manual creation, meaning that it won't automatically update with new content. Another big issue is that it doesn't play well with mobile. You can simply hide the entire menu installation on mobile and use another basic menu, but this isn't super practical.

Depending on why you're looking to add a mega menu to your WordPress website (built with Oxygen), you may want to use route two.

Mega Menu Plugin For Oxygen

Instead of manually adding a megamenu, using a third party plugin could be a better option in some circumstances. Especially if you have a menu that changes a lot, a plugin could end up saving you a lot of time.

There are a ton of megamenu plugins out there, and we tested out a bunch when looking to incorporate this functionality onto client websites built with Oxygen. when searching for the plugin, our criteria was that it needed to be easy to use, Dynamic, well designed, and completely compatible with Oxygen (as you know, there are many plugins that simply are not).

Of the several plugins we tested, WP Mega Menu was the best option that had no compatibility issues with Oxygen Builder.

There's a free version and a pro version. The pro version cost $29.00 per year. the free version works well, but is somewhat restricted when it comes to advanced functionality. If you're looking to incorporate a megamenu in a client website built with Oxygen Builder, the pro version is probably your best bet.

We like this plugin because it's not only easy for us to use, but our clients can quickly update it without breaking our entire website created with Oxygen. It has a simple drag-and-drop interface , and comes with pre built widgets. Basically, it's a “menu builder”.

It's also responsive, which is a major issue when using method one to add a megamenu to your Oxygen Builder website.

After installing the plugin on your website, incorporating it into your site is fairly easy to do. You can choose to have the plugin replace the Default menu, added via shortcode, or using PHP snippet. We're going to incorporate it by using PHP. this is easy to do in Oxygen, simply add a code block component and paste in the following PHP (replace ID with the numerical ID of your menu)

 <?php wp_megamenu(array('menu' => 'ID')); ?>Code language: HTML, XML (xml)

You can place this anywhere, but we recommend using a catchall header and footer template. The width of the code block impacts the menu itself, so ensure that you set it to be wide enough for the content.

Creating the mega menu is fairly easy. Using a visual builder, you can drag and drop elements onto a set row/column layout.

There are some pretty advanced functionalities with this plugin, like a full screen search, dynamic widgets, and more. If you're looking for an easy way to add a megamenu to your Oxygen website, this is your best bet.

If you build websites for clients, and need to give them a simple tool which they can use to edit the menu, this is a great option because of the simplicity.

Conclusion

This article should have covered two ways that you can use to easily add a mega menu to your Oxygen Builder website. Mega menus can add functionality and give your website a premium feel. It's fairly easy to add 1 using CSS and default Oxygen components. you can also use a third party plugin to add a megamenu to Oxygen.

If you have any questions, leave them in the comments section below!