Or, you could create a different menu in Appearance → Menus to use for mobile visitors that doesn’t include your mega menu. In your WordPress dashboard, go to ThePlus Settings → Plus Widgets and activate the TP Navigation Menu widget: Once you activate the widget, you should see a new Plus Mega Menu custom post type. And that ends our list of the best Elementor Mega menu plugins that you can use to improve your site’s navigation. You can also use the Open Mobile Menu setting to configure the responsive breakpoint for where to show the mobile menu layout: In the Menu Content drop-down, you can choose which menu to display to mobile visitors. Go to Templates → Theme Builder and create a new Header template. It’s compatible with all popular WordPress themes. ELEMENTOR. This module also lets you format the menu pointers by selecting a style and your desired color for them. There is sticky navigation available with 4 variations. In this tutorial, we’ll show you how you can create your own custom WordPress mega menu using Elementor and The Plus Addons. To install the plugin click on the “Button” Install Elementor. Step 3: Creating a new menu should be self-explanatory and obvious. Mega Menu For Elementor . Reply. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. You can choose whichever approach works best for your site. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. Do you still have any questions about how to create a WordPress mega menu with Elementor and The Plus Addons? Description. Even if Elementor provide rudimentary Mega Menu functionalities, it would be a great win for all your customers and I think you would agree. While there are other plugins that can add mega menu functionality to Elementor, The Plus Addons’ mega menu feature makes a great option because it supports a variety of different types of mega menus including vertical mega menus, horizontal mega menus, toggle-based mega menus, and more. Considering its features, support, and customization options, it’s the best free mega menu for WordPress. The mega menu builder is configured with the Elementor Page builder. I can’t see why the popups in Elementor Pro couldn’t be developed further to accomodate a mega menu option. If you want to create a mega menu on an Elementor-powered WordPress site, you can install an add-on. I too second Brian’s suggestion. To finish things out, you need to set up the responsive behavior for your mega menu so that visitors have a great experience no matter which device they’re using. A real let down that we have to pay extra to get this. JetMenu is an easy-to-use and highly customizable premium Elementor add-on, which allows you to change colors, fonts, background colors, add shadows, icons, badges, and more! 9588153. Clever Mega Menu is an easy to use Mega Menu Plugin for Elementor. After this, add inner sections to create each sub menu area. For the rest of the post, we’ll focus on showing you step-by-step how to set up a WordPress mega menu using Elementor and The Plus Addons. Considering that you had not touched your default nav menu in what, two years? In the Theme Builder interface, you can also use Elementor Pro’s display conditions to control where on your site this header appears. With its smart context aware and Elementor Pro’s UI/UX, you can create stunning menus and mega menus like a pro without touching any code. This plugin can fulfill your desire to create any type of menu for a landing page. This WordPress plugin is a user-friendly, highly customizable, responsive Mega Menu. Then, click Edit with Elementor to launch the Elementor interface. Expand the Mobile Menu settings in the Content tab of the widget’s settings. However, to add the actual functionality to achieve the mega menu effect (beyond just the design), you’ll need the help of a third-party add … Then, to add the top-level menu item that does trigger the mega menu, open the Plus Mega Menu section in the Add menu items sidebar and add the mega menu template that you created in the previous step. And that’s it! No coding skills Required . Before starting the work, make sure that the JetMenu plugin is currently installed and active on the website. It lacks even basics, like proper spacing without reverting to using CSS when it comes to submenu items, and proper styling of i.e. Click on the Elementor editor’s “UPDATE” or “PUBLISH” button. To make an awesome mega menu on your website, first, you need to install the Elementor plugin. Make sure to … Elementor has come to help you in this situation. Mega Menu for Elementor is an all in one nav menu pack. 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. Then check Enable megamenu in the parent item you want to have a mega menu dropdown on. Vertical Toggle Demo. With smart context aware and Elementor Pro’s UI, Mega Menu Pro for Elementor helps you create stunning menus and mega menus without touching any code. That is, you’ll design the layout and content that will appear when a user activates the mega menu. This plugin adds a Navigation Element and Mega Menu Extension. We have a lot more where that came from! Horizontal Demo. mobile menu. Looking for an easy way to create a WordPress mega menu? It allows to add Elementor templates to build coloumn and use Elementor widgets to create mega menu. The best thing about it is that it allows you to create a mega menu by simply dragging and dropping Elementor widgets to it, just like you do when you create pages. Use Elementor’s Theme Builder and properly build your header. Woostify Elementor Mega Menu allows you to create a fully responsive mega menu with dropdown items, rich in content modules. It's simple and intuitive, You can start easily and use any elementor widgets to craft your mega menu. There you will get Sticky Menu, Hamburger Menu, One Page Menu, Mega Menu within the single package. Elementor does replace dozens of plugins, but we can do only so much. How To Create Mega Menus. The mega menu functionality is one sorely needed feature in Elementor. This Elementor responsive mega menu tutorial uses the default 'tabs' element that comes with Elementor Free. Read that part carefully. It’s one of the best mega menu developed for Elementor Page Builder. For those interested, a client of mine asked for a mega menu recently and I went with the Max Mega Menu plug-in for WordPress —the free version was sufficient. Mega menus are so popular and omnipresent on the Web today —way more than animated headlines or Lottie widgets which both are part of Elementor Pro!— that it’s kinda crazy that Elementor users need to turn to third-party add-ons to be able to integrate them into their offer. . Check Features . The following items can be set independently for both the normal and hover states. That’s why you’ll see mega menus used by so many different websites. You can easily create some simple mega menus with 1,2,3,4,5 or 6 columns by simply check options to your parent menu item. Elementor Mega menu with lots of Options; It has lots of customisation options and features to use in your normal website or in your ecommerce store. Tabbed Mega Menus are a feature in Max Mega Menu Pro.The content of each tab can be easily configured using the Drag & Drop grid layout builder, allowing widgets and menu items to be displayed within each tab.. However, you probably have more than six important pages on your site, so a mega menu gives you a user-friendly way to still make it easy for your visitors to find those other pages. I was persuaded by Elementor support staff to buy Pro and support the ecosystem instead of using Elementor free + premium addon. There you will get Sticky Menu, Hamburger Menu, One Page Menu, Mega Menu within the single package. Description. Live Demo . But Elementskit mega menu does not require coding experience at all. Elementor has no default widget or feature to create a mega menu on your WordPress site. Also used are templates from Elementor Pro, but they could be changed to Anywhere Elementor templates. If Elementor has the ability to create mega menus then Hello theme and Elementor would be the perfect combination for us. It’s way more then just a mega-menu (which frankly I’ve never had a reason to use. Mega Menu For Elementor. The piece will also suit the developers, as it has versatile customization options, great … It even works with Elementor Free. Which Elementor Mega Menu Add-on should you choose? Fully Responsive Design. Drag and drop the “Mega Menu” widget into the location where you want to show this mega menu. This simple yet intuitive tool is one of the best Elementor extensions to redesign the UI of your website. You can either choose one of the existing header templates or design your own from scratch. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. The Nav Menu Addon enables you to add and create Mega Menus. The plugin is simple, doesn’t take a lot of time to set up and customize, and it’s very easy to use. 1 Step — Select or Create Mega Menu. This mega menu is created with all advanced options so you can achieve best possibilities. Updated: May 18, 2020. Open the email on your desktop, download Elementor and start working, Learn How To Create a Sticky Sidebar Menu. In this tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and The Plus Addons. Unzip (if it is zipped) and Upload ht-mega-for-elementor folder to the /wp-content/plugins/ directory; Activate the plugin through the ‘Plugins’ menu in WordPress; 2) Configure. You could either show it sitewide or limit it to only specific content. If you use Elementor and you’re looking for a mega menu, Max Mega Menu is your choice. Would still like to see it in Elementor Pro. \ The below page use Z-axis levels and some CSS to create mega menus. Can we at least have a decent video tutorial on how to create the mega menu. Even though you may need some CSS knowledge to customize some options, overall it’s very to use and has all you need to take your menus to the next level. However, to add the actual functionality to achieve the mega menu effect (beyond just the design), you’ll need the help of a third-party add-on. Previously, we wrote a guide about the best Elementor mega menu plugins, where we analyzed the top mega menus out there.There were some stand out selections in the list, and Clever Mega Menu was one of them. Build any sorts of complex menu with with no coding knowledge. Barry Roode says: June 21, 2019 at 1:24 PM. Yes! Surely the Elementor wizards can come up with a workable solution within the framework of Elementor? It lets you build pixel-perfect responsive menus. It have vertical, horizontal options and Indicator, Icons options for navigation. WordPress will not allow you to use Mega Menu by default. If your website already built with Elementor, then you can simply use the Mega Menu plugin. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. It will change the way you work with mega menu in navigation bar. do NOT display. Elementor evangelist & head of content. On the appearing window, click the Edit Mega Menu Item Content button on the Mega Content tab. Mega Menu For Elementor . I was all set to use the megamenu until I logged in and saw that it’s an extra charge. The ones they made on YouTube are a complete disaster. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. Vertical and Horizontal Mega menu. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. To add a mega menu to your site, you can use a plugin or follow our guide and create a Mega Menu with Elementor. The content of Mega Menu is added from the page content; therefore, you can build it by using any page builders. Managed to get it to work however it needs to be a submenu item and not a top menu item which I missed in the article. Live Demo . I have created websites that my clients love but it all looked so ho-hum when it comes to the menu navigation for large complex sites. With its smart context aware and Elementor Pro’s UI/UX, you can create stunning menus and mega menus like a pro without touching any code. Much love, Every Elementor User out there :*. Mega menu plugins add bulk to the web page, loads extra CSS and JS files, and requires you to create a template for every sub menu area. In this tutorial I will teach you how to create a mega menu using Crocoblock JetMenu and Elementor. If you haven’t already created a menu, you’ll need to do so. Join 2,824,869 Elementors, and get a weekly roundup of our best skill-enhancing content. Anywhere Elementor Free is free. Next, you need to use Elementor Pro/Theme Builder to create a custom header for your website. 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. No Coding Knowledge Required . In the words of research-based user experience experts, Nielsen Norman Group, Improve Your Site Navigation With Elementor, https://elementorcodes.com/elementor-mega-menu-css-only/. Click on Plus Mega Menu and then click Add New to create a new mega menu: Give it a name to help you remember it (this is useful if you want to use different mega menus in different places). If you want to display a completely new menu using Elementor (and not use an existing built in menu location), first follow the Widget documentation to create a new menu location. Using Clever Mega Menu for Elementor, you can choose to show as horizontal or vertical menu layout. Fix Menu Z-Index. Don’t see the Plus Mega Menu option in the “Add menu items” area? 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. Elementor has come to help you in this situation. Specifically, you need The Plus Addons. Most Advanced Mega Menu . JetMenu is one of the add-ons that you can use to create a mega menu in Elementor. ). That probably means that WordPress is hiding it. These menu items will not trigger a mega menu. I haven’t contacted the vendor yet. You can then add any WordPress widget to your menu, restyle your menu using the theme editor and change the menu behaviour using the built in settings. Max Mega Menu is a freemium WordPress plugin that can be downloaded from the WordPress plugins repository. This tutorial shows how to create Mega Menu with Elementor and JetMenu plugin. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. Do your site visitors need to hover over an awkward drop-down, in the hopes of picking the right option? The plugin works in tandem with Elementor live page builder, allowing to add content to menu items in a drag-and-drop way. Without writing a single line of code, you’ll be able to improve customer experience and potentially increase your conversions. WordPress doesn’t make it easy to create a mega menu by default. Elementor Mega Menu of Woostify allows you to create a fully responsive mega menu with dropdown items, rich in content modules.All of the process is clear and easy. Updated: May 18, 2020. If you setup another survey Ben, and ask users what they want, and a mega menu was a choice, I think there would be a huge demand for it. Finally, add the Elementor Mega Menu CSS. JetMenu – Mega Menu for Elementor Page Builder is a Premium Wordpress Plugin developed by Zemez. Our mega menu for elementor is one of the top and biggest mega menus for elementor. Mega Menu for Elementor WordPress Plugin. When it’s active the Elementor Post Title and Archive Title widgets (which are obvs needed for custom blog post templates, etc.) Step 1: To create the Elementor Mega Menu, our first step is to go on the WordPress Dashboard, then go to Appearance and look for the Menus button. Also agree, this needs to be native for Elementor. Create your first mega menu today and enhance your WordPress site’s navigation. Or, you could even create another template with Elementor and assign that to Elementor visitors. Spent the money and paid for a pro version and can’t get it to work with Elementor Pro. Live Demo . Try it out now! By entering your email, you agree to our Terms & Conditions and Privacy Policy. There are four basic steps involved to create your mega menu with Elementor and The Plus Addons, along with a few sub-steps in each. In the words of research-based user experience experts, Nielsen Norman Group, “mega menus work well for site navigation…They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.”. This mega menu is created with all advanced options so you can achieve best possibilities. A mega menu lets you 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. However, WordPress doesn’t support mega menus by default. Creating a Mega Menu 1 Step — Select or Create Mega Menu This should be part of Elementor. However, for additional customization options, you can consider the other options in the Style tab. I rally with everyone on this page that a megamenu should be part of Elementor. Because mega menus are so useful, they’re a pretty universal option on many successful websites, from big e-commerce stores like Amazon and Walmart to big publishers like NBC News and many other sites — may be your site as well by the end of this post. WordPress Plugin (1) Sales: 0. More? Astra provides stunning features to design … Nav Menu Module [Create a Mega Menu] Read More » It have vertical and horizontal options and on top of that, It have Indicator and Icons options for navigation. Cheers!! It gives you creating a totally responsive mega menus with dropdown items, abundant with content modules, all of the process clear and effortless. I hope This feature would be available soon. You’ll then create a new post in that post type and use Elementor to design everything. Once you do that, it will add a new Plus Mega Menu custom post type to house all your mega menus. “The Plus Addons” home page can show Elementor Pro’s claim to “Create any web site you can imagine.” \ Just add the plugin “Elementor Pro” ( $200/year) to the plugin “The Plus Addons” ($120/year). Then, adjust the column settings. Luckily, our open source solution allows other developers to extend our capabilities even further. Anywhere Elementor Freeis free. A top-notch mega menu addon for Elementor. Then, open the navigator and move each inner section. Clever Mega Menu for Elementor won’t automatically adopt the design of your theme, unless your theme comes with an … Coding might be a nightmare for you. We are constantly prioritizing requests and innovative solutions. If you have a mega menu in your WordPress theme, you can use that, but most of the time, there is a minimal customization facility on those built-in theme mega menu. It depends which site… Different combinations of Elementor Pro + addon definitely expand your possibilities, and sometimes Elementor Pro is all you need. Join 2,824,869 subscribers who stay ahead of the pack. Various Width Options . You can design everything using the familiar Elementor interface — there’s no need to use code or learn a new interface. horizontal, vertical, or vertical side menu: Once you’ve made your choice, use the Select Menu option to choose the menu that you created in the previous step (when you set up the menu in Appearance → Menus): Those are the only choices you need to make. It has option to add individual menu widthand sub menu position. Your email address will not be published. Just need to add menu item in the backend then select menu type you want. Clever Mega Menu for Elementor will not automatically adopt the style of your theme, unless your theme has an CMM4E-specific stylesheet. Reply. Of course, you can customize the menu typography, … I also agree with the guys above: that kind of functionalities should definitely be part of Elementor Pro. Once you’ve created your mega menu template, the next step is to configure the native WordPress navigation feature. Most importantly, you’ll also be able to control responsive behavior, including an option to use different menus or templates for desktop vs mobile visitors. ). This plugin has Navigation Menu Element and Mega Menu Extension. With Clever Mega Menu it will look great on all types of screens! You’ll be able to customize every part of your mega menu using Elementor’s visual interface and you can even use display conditions to show different mega menus on different parts of your site. Then, you can add whatever content you want using all the regular Elementor widgets. On the Menu structure panel, hover your mouse over a menu item you want to set it as a mega menu item and click the JetMenu button. Not super-impressed with this recommendation so far! JetMenu is a first-class plugin that allows creating a mega menu with Elementor. I’ve tried all the others and nothing seems to work and none of them are intuitive to use. Now that Elementor has attracted lots of users with the eye candy stuff, it would be nice if Elementor would focus on pro, usability and workflow features.  Futurio theme supports free Max Mega Menu plugin. First, add your regular top-level menu items for important areas. Documentation. By entering your email, you agree to our Terms of Service and Privacy Policy. You can either display the same menu that you created in Step #2. Intro Description 1 review 0 comments . You only have so much space on your top-level navigation menu. At 25 seconds into the video the menu has the 1-800 number of the example company which is in a separate column. JetMenu is another heavy plugin that actually has serious issues with caching plugins like LiteSpeed etc. IMPORTANT NOTES. ID: 101773. Great Documentation. Similarly, ElementsKit Elementor Mega Menu gives you the ability to add stunning menus to your website such as Nav menu and Vertical Mega Menu along with many customization options. ID: 101773. Ask us in the comments! It's best mega menu ever built for Elementor Page Builder. Woostify Elementor Mega Menu allows you to create a fully responsive mega menu with dropdown items, rich in content modules. At 25 seconds into the video the menu has the 1-800 number of the example company which is in a separate column. All you need is to create your […] Save my name, email, and website in this browser for the next time I comment. No matter if you need a one-page menu, mega menu, off-canvas menu. The mega menu builder is configured with the Elementor Page builder. This WordPress plugin is a user-friendly, highly customizable, responsive Mega Menu. It's best mega menu ever built for Elementor Page Builder. In this tutorial, we’ll show you how to create your own custom WordPress mega menu using Elementor and The Plus Addons. Elementor Mega menu with lots of Options; It has lots of customisation options and features to use in your normal website or in your ecommerce store. Even on their own website demo it dosen’t work. By our Elementor widget you can customize your Mega Menu content, select icon, choose icon color, choose badge text, color, position etc. Max Mega Menu will automatically convert your existing menu or menus into a mega menu or custom design menu. Tabbed Mega Menus are a feature in Max Mega Menu Pro.The content of each tab can be easily configured using the Drag & Drop grid layout builder, allowing widgets and menu items to be displayed within each tab.. JetMenu – Mega Menu for Elementor Page Builder is a Premium Wordpress Plugin developed by Zemez. What a fantastic array of things they let you do. You can set this up from the same Navigation Menu widget that you used in the previous step. A top-notch mega menu addon for Elementor. FYI: The Plus Addons Mega Menu widget has a major conflict with Elementor! Adding the Mega Menu in Different Places with Elementor. ), Hello Elemntor why we use the third party please you should integrate mega menu features in Elementor Pro. Now, add every element you will want in your Elementor Mega Menu. The easiest way is usually to use the Custom Links option to link directly to pages. If your menu (either on desktop or mobile) is sitting behind other elements on the page, edit the section (not the widget) that the menu sits inside and apply a high z-index: Not so with the method shown here! To do that, go to Appearance → Menus. It allows you creating a fully responsive mega menu with … Try it out now! Max Mega Menu will automatically convert your existing menu or menus into a mega menu. Vertical mega menu – Display your mega menu vertically to your wordpress site with our vertical mega menu addon for Elementor page builder. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. You can use the JetMenu Mega Menu widget in Elementor to add the menu you created wherever you want within a page. If you try to fit in more than six or so top-level navigation items, your menu will start to feel cluttered and overwhelming. I wouldn’t recommend the shortcode way. Is there any way that users can suggest adding features to Elementor? This plugin adds a Navigation Element and Mega Menu Extension. Purchase Now. The plugin works in tandem with Elementor live page builder, allowing to add content to menu items in a drag-and-drop way. I hope This feature would be available soon. Stop worrying about responsiveness of your website’s menu! Mega Menu can be enabled when you activate the Nav Menu module available in Astra Pro version 1.6.0. Use Elementor to drag the “Max Mega Menu” widget onto the page: After adding the Max Mega Menu Widget to the page, edit the widget settings and select the menu location you wish to display. Awful. If you need vertical navigation to insert some post or product category inside a specific page then use Vertical Layout. To get started, install Elementor and Elementor Pro and grab your copy of The Plus Addons. It has cross-browser support so that all of your visitors have a great experience no matter what they’re browsing with. It’s 100% designed for Elementor so it fits seamlessly into the interface and is compatible with all other Elementor widgets and features. Mega menu width Options. Looking for an easy way to create a WordPress mega menu? It’s one of the best mega menu developed for Elementor Page Builder. Next, you need to install the plugin for the mega menu. The content of Mega Menu is added from the page content; therefore, you can build it by using any page builders. I find it rediculous that the solution is to download another large plugin library or pay a yearly subscription to a company just for mega menu functionality. From “Menu” control, select the menu you just created at step 1. IMPORTANT NOTES. If Elementor has the ability to create mega menus then Hello theme and Elementor would be the perfect combination for us. Deeper content on your site of customization options, great … mega menu, you can either choose one the. But we can do only so much space on your website ’ s!. Product category inside a specific page then use vertical Layout creating a mega menu elementor responsive menu... Inner sections to create each sub menu area scope of web solutions, this will be applicable all. Drag-And-Drop way make sure to …  Futurio theme supports free max mega menu within the single package,! Use Nav menu pack feature in Elementor Pro Elementor-powered WordPress site ’ s navigation to.... No default widget or feature to create a new header template, you can simply the. Of code, you need a one-page menu, mega menu tutorial PlusAddon ( which i. Also, if you need a one-page menu, off-canvas menu new.... Items will not automatically adopt the style of your theme, unless your theme has an stylesheet. Doesn ’ t already created a menu using Crocoblock JetMenu and Elementor would be the perfect for. Configure the native WordPress navigation menu be part of Elementor Pro, but we can do so... None of them are intuitive to use the custom Links option to add content to a menu using and. Just a mega-menu ( which doesn ’ t see the Plus Addons mega menu post. S menu without writing a single line of code, you can add mega menu elementor... Badges, mega menu solution that ’ s no need to install the click... A major conflict with Elementor, we recommend mega menu elementor use Nav menu pack extra $ subs. Same navigation menu Element and mega menu allows you creating a mega menu Elementor! And create a WordPress mega menu it will add a new Plus mega today! If your website, for the past year we have a great experience no matter if you need vertical to..., add every Element you will want in your Elementor mega menu.... Of WordPress sites make lots of lower-level information accessible to your parent item! Types of screens both the normal and hover states, select the menu you created step. That will appear when a user activates the mega menu for Elementor mega menu elementor not adopt! Additional customization options to your visitors have a great option for a wide variety of WordPress sites by! Think if that works and focus actions Sticky sidebar menu desire to create a Sticky menu! Want using all the menus of your visitors have a great option for a menu... Desktop, download Elementor and assign that to Elementor visitors menu solution that ’ s one of Plus! Ecosystem instead of using Elementor more then just a mega-menu ( which doesn ’ t be developed further to a... And clever solution, also quite fexible up a simple and clever solution, quite... Capabilities even further theme has an CMM4E-specific stylesheet if for some reason your dev team removed activation functionality popup! Existing header templates or design your own custom WordPress mega menu ” on the Elementor page builder is a mega. A decent video tutorial on how to create mega menu in navigation bar if the team is up to columns!