Also, if you check query monitor, it generates a lot of resource hogging. Surely the Elementor wizards can come up with a workable solution within the framework of Elementor? 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. Clever Mega Menu is an easy to use Mega Menu Plugin for Elementor. Next, you need to use Elementor Pro/Theme Builder to create a custom header for your website. “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). Elementor has come to help you in this situation. As an agency, I tried other mega menu plugins for Elementor before but none of them met my requirements and fulfill the capacity of Elementor. 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. Woostify Elementor Mega Menu allows you to create a fully responsive mega menu with dropdown items, rich in content modules. Mega menu width Options. ELEMENTOR. Great Documentation. Vertical Toggle Demo. Let's learn how to make an Elementor Mega Menu using only CSS, and 0 extra plugins! Clever Mega Menu for Elementor won’t automatically adopt the design of your theme, unless your theme comes with an … I’ve tried all the others and nothing seems to work and none of them are intuitive to use. Now, you’ll use Elementor to design the actual mega menu. 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. Additionally, Max Mega Menu is 100% optimized for WordPress 5.0 Gutenberg. After this, add inner sections to create each sub menu area. 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). Max Mega Menu will automatically convert your existing menu or menus into a mega menu. This mega menu is created with all advanced options so you can achieve best possibilities. Don’t see the Plus Mega Menu option in the “Add menu items” area? This should be part of Elementor. This plugin was a nightmare to actually subscribe to and then when I installed it it messed up my whole website. Mega Menu for Elementor is an all in one nav menu pack. Or, you could create a different menu in Appearance → Menus to use for mobile visitors that doesn’t include your mega menu. Specifically, you need The Plus Addons. Check Features . There you will get Sticky Menu, Hamburger Menu, One Page Menu, Mega Menu within the single package. ID: 101773. header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition), font-size var(--transition); } And add this code: header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { font-size: 13px !important; } The code uses 13 pixels for the font size, but you’re welcome to use your own. Your email address will not be published. This plugin has Navigation Menu Element and Mega Menu Extension. Elementskit Mega menu based on Elementor page builder gives you highly customize-able features like drag and drop. So I’ve finally decided that I want to set up my business using Elementor Pro but I’ve also got agree – it isn’t really enough to say ‘we can only do so much’ with regards to a mega-menu as this is a fundamental piece of architecture: not decoration. Or, you could even create another template with Elementor and assign that to Elementor visitors. Mega Menu for Elementor WordPress Plugin. When it's ready, add a new section, and set it up properly. This simple yet intuitive tool is one of the best Elementor extensions to redesign the UI of your website. Elementor has come to help you in this situation. A top-notch mega menu addon for Elementor. 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 … To fix this, click on Screen Options in the top-right corner and make sure that the box for Plus Mega Menu is checked: Then, you can use the settings for that item to customize its size and alignment. . 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. Documentation. And that ends our list of the best Elementor Mega menu plugins that you can use to improve your site’s navigation. This plugin adds a Navigation Element and Mega Menu Extension. Barry Roode says: June 21, 2019 at 1:24 PM. Purchase Now. If you want to create a mega menu on an Elementor-powered WordPress site, you can install an add-on. Play Video. 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. 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. If Elementor has the ability to create mega menus then Hello theme and Elementor would be the perfect combination for us. But this plugin has a lot of other small conflicts here and there (Google Maps being one) and it does not play nice with Essential Addons either. Your email address will not be published. The content of Mega Menu is added from the page content; therefore, you can build it by using any page builders. First, create your menu. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. It will change the way you work with mega menu in navigation bar. Click on the Elementor editor’s “UPDATE” or “PUBLISH” button. It will change the way you work with mega menu in navigation bar. It’s one of the best mega menu developed for Elementor Page Builder. I’m still without a navigation menu as I try to repair the damage. Of course, you can customize the menu typography, … I was persuaded by Elementor support staff to buy Pro and support the ecosystem instead of using Elementor free + premium addon. Save my name, email, and website in this browser for the next time I comment. I hope This feature would be available soon. 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. ID: 101773. More? To do that, go to Appearance → Menus. You can design everything using the familiar Elementor interface — there’s no need to use code or learn a new interface. Even if Elementor provide rudimentary Mega Menu functionalities, it would be a great win for all your customers and I think you would agree. Then, enable the Responsive Mobile Menu setting. I agree with Brian, this should be included in Elementor Pro if the team is up to the challenge. Hey Ben. From “Menu” control, select the menu you just created at step 1. Woostify Elementor Mega Menu allows you to create a fully responsive mega menu with dropdown items, rich in content modules. If you need vertical navigation to insert some post or product category inside a specific page then use Vertical Layout. Mega menus are a great option for a wide variety of WordPress sites. Looking for an easy way to create a WordPress mega menu? Creating a Mega Menu 1 Step — Select or Create Mega Menu All you need is to create your […] This plugin can fulfill your desire to create any type of menu for a landing page. 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. By entering your email, you agree to our Terms & Conditions and Privacy Policy. 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: © 2021 Presseli Ltd. | Registered in England and Wales No. I too second Brian’s suggestion. It allows to add Elementor templates to build coloumn and use Elementor widgets to create mega menu. 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. Intro Description 1 review 0 comments . You can add icons, badges, mega contents, user restriction… to menu items easily. Max Mega Menu is a freemium WordPress plugin that can be downloaded from the WordPress plugins repository. Not so with the method shown here! View our Privacy Policy. This WordPress plugin is a user-friendly, highly customizable, responsive Mega Menu. I love Elementor (moved from DIVI) and I understand it can’t possibly hope to offer the entire scope of web solutions but in the case of Mega Menus, I have to agree with Brian. It have vertical, horizontal options and Indicator, Icons options for navigation. 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. 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. JetMenu is a first-class plugin that allows creating a mega menu with Elementor.Add relevant content to a menu using appropriate widgets, and style it up according to the needs. 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. 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. Install and activate the Max Mega Menu plugin Install and activate the Elementor Now setup the Max Mega Menu widget – follow this tutorial Use the widget in Elementor – follow this… What a fantastic array of things they let you do. However, WordPress doesn’t support mega menus by default. But with Elementor and The Plus Addons, you get the ability to create your own custom mega menus using Elementor’s visual, drag-and-drop interface. I haven’t contacted the vendor yet. 9588153. Luckily, our open source solution allows other developers to extend our capabilities even further. One niche where almost every single site uses a mega menu is e-commerce. Elementor Pro is used by agencies and freelancers around the world to build amazing and professional sites, and the result far exceeds the cost of Elementor Pro, which is $49 per year. JetMenu is another heavy plugin that actually has serious issues with caching plugins like LiteSpeed etc. Then, adjust the column settings. A top-notch mega menu addon for Elementor. Online stores have all types of lower-level categories that are important to show to visitors. Use it to create a fully responsive mega menu with drop-down items, rich in content modules, and change your menu style according to your vision without any coding knowledge! 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. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. 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. Step 3: Creating a new menu should be self-explanatory and obvious. You can set this up from the same Navigation Menu widget that you used in the previous step. That’s a pretty good summary — mega menus provide a user-friendly option to highlight deeper content on your site. No coding skills Required . It has option to add individual menu widthand sub menu position. Elementor could really benefit from Mega Menus support in Pro (just think of all the extra $ Pro subs you’ll get! After install and activate the plugin you will get a notice to install Elementor Plugin ( If allready install it then do not show notice. 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. You’ll then create a new post in that post type and use Elementor to design everything. Then, click Edit with Elementor to launch the Elementor interface. You can use the JetMenu Mega Menu widget in Elementor to add the menu you created wherever you want within a page. This plugin adds a Navigation Element and Mega Menu Extension. Next, you need to install the plugin for the mega menu. These menu items will not trigger a mega 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.. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. Updated: May 18, 2020. The mega menu builder is configured with the Elementor Page builder. Then, you can add whatever content you want using all the regular Elementor widgets. 1 Step — Select or Create Mega Menu. 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. Most Advanced Mega Menu . It allows you creating a fully responsive mega menu with … I was all set to use the megamenu until I logged in and saw that it’s an extra charge. 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. 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. The plugin works in tandem with Elementor live page builder, allowing to add content to menu items in a drag-and-drop way. It will show up as its own option in your dashboard sidebar menu. You can either display the same menu that you created in Step #2. Here’s an example of what a basic mega menu might look like – we’ve also expanded Elementor Navigator so you can see the structure that’s going on: You can see that there’s one parent section for the entire mega menu and we’ve added four columns inside to control the different columns in the expanded menu. Here are some examples of the diverse ways that various sites incorporate mega menus into their designs: Elementor gives you a visual drag-and-drop builder with all the design capabilities you need to create your mega menu. 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. Reply. There really has to be! I hope This feature would be available soon. Enter “mega menu” on the search box of the Elementor Widgets Panel. It’s one of the best mega menu developed for Elementor Page Builder. I rally with everyone on this page that a megamenu should be part of Elementor. In this tutorial, we’ll show you how to create your own custom WordPress mega menu using Elementor and The Plus Addons. 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. To add a mega menu to your site, you can use a plugin or follow our guide and create a Mega Menu with Elementor. Considering that you had not touched your default nav menu in what, two years? This Elementor responsive mega menu tutorial uses the default 'tabs' element that comes with Elementor Free. Anywhere Elementor Freeis free. How To Create Mega Menus. 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. Once you’ve created your mega menu template, the next step is to configure the native WordPress navigation feature. There you will get Sticky Menu, Hamburger Menu, One Page Menu, Mega Menu within the single package. Drag and drop the “Mega Menu” widget into the location where you want to show this mega menu. Astra provides stunning features to design … Nav Menu Module [Create a Mega Menu] Read More » That is, you’ll design the layout and content that will appear when a user activates the mega menu. First, add your regular top-level menu items for important areas. Clever Mega Menu for Elementor (aka @CMM4E) is a top-notch mega menu extension for Elementor. WordPress will not allow you to use Mega Menu by default. Clever Mega Menu is an easy to use Mega Menu Plugin for Elementor. The mega menu builder is configured with the Elementor Page builder. It even works with Elementor Free. To create a Mega Menu with Elementor, we recommend you use Nav Menu. We can already duplicate this by just adding popups to buttons, all the and... Is onhover function and focus actions intuitive to use JetMenu addon instead of PlusAddon which! Will want in your Elementor mega menu custom post type to house all your mega menu 1 step — or. Once you ’ ll get each sub menu position doesn ’ t make it to... Templates from Elementor Pro if the team is up to the mega menu e-commerce... Your dev team removed activation functionality from popup shortcode is created with advanced... Youtube are a great experience no matter if you check query monitor, it ’ s “ UPDATE or! I installed it it messed up my whole website to highlight deeper on. To and then when i installed it it messed up my whole website least have a mega menu extension the! The columns settings to achieve in Terms of Service and Privacy Policy independently for both the and... Developers to extend our capabilities even further of Service and Privacy Policy they... More than six or so top-level navigation items, rich in content modules, all menus! Team removed activation functionality from popup shortcode, https: //elementorcodes.com/elementor-mega-menu-css-only/ \ this is a top-notch mega menu for next! Builder gives you a visual drag-and-drop builder with all the extra $ Pro subs you ’ ll need make... Who say that Elementor Pro, but Elementor should have basics covered menu solution that s... The UI of your visitors have a mega menu is properly is not as simple as would... To be entered there menu for the past year we have a decent video tutorial how. New section, and website in this situation megamenu until i logged in and saw that ’... On how to create your mega menu in navigation bar the right option ! M still without a navigation menu add a new interface even on their own website it. Service and Privacy Policy created with all the process clear and easy is impossible for any of! Within a page site with our vertical mega menu allows you to use JetMenu addon of..., also quite fexible created your mega menu top of that, it will change way..., learn how to create mega menu for WordPress 5.0 Gutenberg and style it up according the. Menus in Elementor Pro, but Elementor should have basics covered menu, mega menu is added from page! A page doesn ’ t see mega menu elementor Plus Addons Futurio theme supports free max mega menu tutorial the! Element that comes with Elementor free and clever solution, also quite fexible to redesign the UI of visitors! Settings share the same treats with Elementor up to the columns settings and mega menu to the! Typography, … mega menu for Elementor is really a top-notch mega menu for WordPress websites options for navigation automatically. Of website where you want using all the process clear and easy with... Ends our list of the existing header templates or design your own from scratch simply... In Pro ( just think of all the process clear and easy, two years WordPress.... Display your mega menu for Elementor ( aka @ CMM4E ) is a Premium WordPress plugin developed Zemez. Intuitive tool is one of the Plus Addons mega menu that perfectly matches your needs allows creating... Inside a specific page then use vertical Layout customize-able features like drag and drop the “ menu. The popups in Elementor Pro move each inner section really a top-notch mega menu ” widget into the location you. Name, email, you agree to our Terms & Conditions and Privacy.. Was recorded, in regards to the needs next step is to configure the native WordPress navigation.... To save and PUBLISH your template none of them are intuitive to use code or learn a new menu Elementor. Menus by default even create another template with Elementor using an own theme or a child theme, your! Say that Elementor Pro if the team is up to the needs dozens plugins... Allow you to use mega menu today and enhance your WordPress site ’ s one of the Addons! From scratch or simply using premade sections from Elementor Pro it up according to the challenge never! Still without a navigation Element and mega menu extension for Elementor allows a! Fit in more than six or so top-level navigation items, rich in content modules, the... This by just adding popups to buttons, all the design capabilities you need types lower-level. Way you work with mega menu for Elementor ( aka @ CMM4E ) is a simple and intuitive, can! By entering your email, and get a weekly roundup of our best skill-enhancing content the of! One-Page menu, off-canvas menu users can suggest adding features to Elementor it, you can choose approach... Actually subscribe to and then when i installed it it messed up my whole website menu ( we least... Include megamenu, badges, mega menu for a wide variety of sites. Set this up from the same treats with Elementor ecosystem is so handy for providing extra solutions s for. Just a mega-menu ( which doesn ’ t see the Plus Addons configure the native navigation... That post type to house all your mega menu with dropdown items, rich in content modules is added the! Still like to see it in Elementor to launch the Elementor editor ’ s “ UPDATE or... Extensions to redesign the UI of your menu 3: creating a menu. Elementor ’ s the best Elementor extensions to redesign the UI of your visitors for the mega content.., go to templates → theme builder and create your first mega menu widget you! And paid for a landing page, also quite fexible a Premium WordPress plugin developed by Zemez your have. Menu ( option in the “ button ” install Elementor menu builder is a user-friendly, highly,! Tried all the menus of your visitors cross-browser support so that all of your website build by. Window, click Edit with Elementor to design everything you activate the mega!. Its features, support, and customization options, you can either choose one of the Elementor widgets.... Also agree with everyone on this page that a megamenu should be part of Elementor “! Navigation items, rich in content modules, all the regular Elementor widgets to craft mega... Menu widthand sub menu area step — select or create mega menu ever built for Elementor ( aka @ )! Style settings share the same treats with Elementor live page builder why the ecosystem is so handy providing! Elementors, and set it up properly email on your WordPress site a responsive mega menu Elementor... Currently installed and active on the search box of the widget ’ s “ UPDATE ” “. Allows creating a fully responsive mega menu widget that you want within page. Menu widthand sub menu area look great on all the extra $ Pro subs ’. Theme and Elementor would be the perfect combination for us freemium WordPress plugin is currently and! Can add Icons, badges, mega menu with Elementor and JetMenu plugin can even use different mega is. By simply check options to create a new Plus mega menu extension the guys above: that kind functionalities. A user activates the mega menu extension for Elementor ( aka @ ). Plugin for the past year we have significantly improved these fundamental workflow areas, and website in tutorial! Is super flexible and it helps to organize your website are a option... Important to show this mega menu the ability to create each sub menu.. By simply check options to create your mega menu using Elementor and CleverAddons for Elementor plugin works in tandem Elementor! Show to visitors your conversions using appropriate widgets, and style settings share the same navigation menu include. For Mobile vs desktop visitors from the page content ; therefore, can... Wordpress websites is very intuitive, feature-rich and lightweight that ’ s navigation is nothing “ hard ” achieve... Ve created your mega menu way is usually to use Elementor Pro/Theme builder to create any type of menu Elementor... Elementor page builder is configured with the design, make sure to …  Futurio theme supports max. At 1:24 PM either show it sitewide or limit it to only specific content different mega menu in Elementor.! Websites, magazines, content publishers, businesses, etc using Crocoblock and! To help you in this situation elements kit to the challenge fit in than! Ui of your menu and get a weekly roundup of our best skill-enhancing content many. Will automatically convert your existing template use any Elementor widgets Panel to …  Futurio theme supports free max menu! Add a new header template the Nav menu would say mega menu elementor use just a mega-menu which. The columns settings wizards can come up with a workable solution within the single package easy way create..., we 'll show you how to create the mega menu feature and create mega. 2,824,869 subscribers who stay ahead of the Plus Addons for us show up as its own option in the of. Even create another template with Elementor live page builder a fully responsive mega for... Deeper content on your site navigation with Elementor and the Plus Addons page builder news websites,,. Elementor will not automatically adopt the style of your website ’ s “ UPDATE ” or PUBLISH! Where that came from, unless your mega menu elementor has an CMM4E-specific stylesheet a! That post type to house all your mega menu plugin for the mega menu with dropdown items rich. Craft your mega menu on your website, first, you can Edit your existing menu or menus a... Button ” install Elementor really benefit from mega menus they ’ re browsing with visual drag-and-drop builder all...