Mega Menu WordPress
Mega Menu Do your site guests need to float over an abnormal drop-down, with expectations of picking the ideal choice? Then, at that point, you really want a uber menu. In this instructional exercise, we’ll tell you the best way to make your own custom WordPress super menu utilizing Elementor and Crocoblock.
Searching for a simple method for making a WordPress uber menu?
Super menus are huge expandable menus where everything is apparent without a moment’s delay
guests don’t have to drive over an abnormal drop-down to attempt to pick the best choice or delve into your footer to track down the thing they’re searching for.
Since super menus are so helpful, they’re a widespread choice on numerous effective sites, from huge internet business stores like Amazon and Walmart to enormous distributors like NBC News and numerous different destinations — might be your website also before the finish of this post.
Be that as it may, WordPress doesn’t uphold super menus as a matter of course. So except if your subject as of now has its own inherent uber menu included (which is generally restricted in any case), you can’t exploit this helpful plan strategy. That is the reason we’re here to help.
In this instructional exercise, we’ll show you how you can make your own custom WordPress uber menu utilizing Elementor and Crocoblock’s JetMenu. You’ll have the option to modify all aspects of your super menu utilizing Elementor’s visual interface and you can even utilize show conditions to show distinctive uber menus on various pieces of your site.
In particular, you’ll likewise have the option to control responsive conduct, including a choice to utilize various menus or formats for work area versus versatile guests.
When Should You Add a Mega Menu in WordPress?
Super menus are an incredible choice for a wide assortment of WordPress destinations. In the expressions of examination-based client experience specialists, Nielsen Norman Group, “uber menus function admirably for site route… They are a superb plan decision for obliging countless choices or for uncovering lower-level site pages initially.”
That is a very decent outline — super menus give an easy-to-use choice to feature further substance on your site.
You just have such a lot of room on your high-level route menu. On the off chance that you attempt to fit in more than six or so high-level route things, your menu will begin to feel jumbled and overpowering. Be that as it may, you most likely have in excess of six significant pages on your site, so a super menu gives you an easy-to-understand method for stilling make it simple for your guests to track down those different pages.
One specialty where pretty much each and every site utilizes a uber menu is internet business. Online stores have a wide range of lower-level classifications that are imperative to show to guests. A uber menu allows you to do that in one stroke:
This is a huge upgrade from the “old” way of doing things, which was building stacked menus with lots of submenus. This required the visitor to be a master “hoverer” and one mistake would send them back to the beginning:
Here’s a couple of examples of big e-commerce stores that use mega menus:
Mega menus aren’t just for e-commerce stores, though. This tactic makes a great option for any type of website where you need to make lots of lower-level information accessible to your visitors.
For example, news websites, magazines, content publishers, businesses, etc. Here are some examples of the diverse ways that various sites incorporate mega menus into their designs:
How To Add a Mega Menu in WordPress
Here’s the basic process to create a mega menu with Elementor and JetMenu:
- Set up your menu (Appearance → Menus).
- Enable JetMenu and choose the menu item that you want to open the mega menu.
- Design your mega menu using Elementor.
- Display your mega menu in a Header template using Elementor Theme Builder and JetMenu’s mega menu widget.
We’ll take you through everything step-by-step.
To get started, make sure to install the following plugins:
1. Set Up Your Regular WordPress Menu
To get started, you need to set up your basic menu using the regular WordPress menu settings. To access these settings, go to Appearance → Menus.
If you haven’t already created a menu for your site, you’ll want to make sure that you’ve set up the menu structure. In the next step, you’ll be able to turn one or more of the top-level menu items into a mega menu when a user hovers over it:
For example, you can see that there’s a menu item for “Shop”. In the next step, you’ll be able to make it so that the mega menu expands when a user hovers over the Shop menu item.
Once you’re happy with the menu structure (or if you’ve already set up your menu structure), you can move on to the next step.
2. Enable JetMenu and Set Mega Menu Item
Next, use the toggle in the JetMenu Locations Settings to Enable JetMenu for current location under the Primary Menu settings.
Once you enable JetMenu, you can hover over the menu item that you want to trigger your mega menu and click the JetMenu button:
Clicking the JetMenu button should open a popup.
In the popup, make sure to set the Mega submenu enabled toggle to on and save your changes:
That’s the only setting that you must configure, but there are other optional settings that you might want to consider. These other settings will let you:
- Change the mega menu position relative to the menu item.
- Set a custom mega menu width.
- Add icons or badges.
- Set custom padding for the menu item.
If you’re not sure how a certain setting will affect your mega menu, you can always come back to these settings later on once you get a feel for how your mega menu looks with the default settings.
3. Design Your Mega Menu Using Elementor
Next, click the Edit Mega Menu Item Content button to launch the Elementor interface. The interface will open in a popup, but it’s the same regular Elementor interface other than that.
Now, you can create the design for the mega menu itself. This is the content that will appear underneath the menu item when a user hovers over it.
How you create this design is totally up to you. If you have no idea where to start, you can begin by creating a section with a two or three-column layout.
Here, we’ve created just a simple three-column dummy design to illustrate how you might go about it:
To give you an idea of how that design will eventually look on the front-end, here’s an example of the real mega menu being triggered on hover:
Again, this is just the Hello theme and some simple dummy content with a gray background to illustrate the concept. But you can see that the mega menu essentially just displays the section but in a contained layout.
With this in mind, you can feel free to use any Elementor widgets in your design. You can even bring in dynamic content.
For example, you could use the Posts widget to automatically showcase your latest blog posts in the mega menu. You can also include a contact form, maps, etc.
Make sure to save your design when you’re finished. You can close the popup by clicking the “X” in the top-right corner (the icon can be hard to see, but it should be there).
4. Create Your Header Template Using Elementor Theme Builder
At this point, you’re almost finished. The last step is to create a header template using Elementor Theme Builder so that you can properly trigger your mega menu.
To do that, go to Templates → Theme Builder to open Elementor Theme Builder. Then, create a new header template:
You can either choose from one of the pre-built header templates or design your own from scratch.
However, instead of using the built-in Elementor Nav Menu widget like you normally would, you need to add JetMenu’s Mega Menu widget (or the Vertical Mega Menu widget if you want to make it vertical instead of horizontal). You’ll see these elements in the JetElements section of the Elementor sidebar or you can search for them by name.
In the Mega Menu widget’s settings, you can choose the menu that you created in step #1 for desktop visitors.
You can use the same menu for mobile visitors or you also have the option to choose a separate menu for mobile visitors. To use separate menus, you would need to create another menu just for mobile visitors in the Appearance → Menus interface:
You can also use the Mega Menu widget’s other settings to control the mobile layout and general design, style, and layout options.
In the Mobile Layout settings, you get a lot of options for configuring mobile behavior such as:
- Whether to have the mega menu slide-out, drop-down, or push other content.
- The container position.
- Whether to close the mega menu after navigation.
- Etc.
And that’s it! Once you publish your header template, your new mega menu will be live.
Create a Custom Mega Menu for Your Own Website
If your site has a lot of content/categories that you need to present to visitors, a mega menu is the best way to make those navigation items accessible while still keeping your site clean and user-friendly. That’s why you’ll see mega menus used by so many different websites.
WordPress doesn’t make it easy to create a mega menu by default. But with Elementor and Crocoblock, you get the ability to create your own custom mega menus using Elementor’s visual, drag-and-drop interface.
Create your first mega menu today and enhance your WordPress site’s navigation. To get started, install Elementor and Elementor Pro and grab your copy of JetMenu.
Do you still have any questions about how to create a WordPress mega menu with Elementor and Crocoblock? Ask us in the comments