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. Check Features . Then check Enable megamenu in the parent item you want to have a mega menu dropdown on. You can even use different mega menu templates for mobile vs desktop visitors. This Elementor responsive mega menu tutorial uses the default 'tabs' element that comes with Elementor Free. Stop worrying about responsiveness of your website’s menu! If you haven’t already created a menu, you’ll need to do so. Drag and drop the “Mega Menu” widget into the location where you want to show this mega menu. These menu items will not trigger a mega menu. This module also lets you format the menu pointers by selecting a style and your desired color for them. 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/. Step 2: Let’s then create a New Menu for the sake of this Mega Menu tutorial. After install and activate the plugin you will get a notice to install Elementor Plugin ( If allready install it then do not show notice. 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. That’s a pretty good summary — mega menus provide a user-friendly option to highlight deeper content on your site. We have a lot more where that came from! Clever Mega Menu is a top-notch mega menu extension for Elementor. The plugin works in tandem with Elementor live page builder, allowing to add content to menu items in a drag-and-drop way. Surely the Elementor wizards can come up with a workable solution within the framework of Elementor? The mega menu functionality is one sorely needed feature in Elementor. mobile menu. It has option to add individual menu widthand sub menu position. 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. It allows you creating a fully responsive mega menu with … Drag and drop the “Mega Menu” widget into the location where you want to show this mega menu. That’s why you’ll see mega menus used by so many different websites. Please sort this guys! First, add your regular top-level menu items for important areas. That is, you’ll design the layout and content that will appear when a user activates the mega menu. Can we at least have a decent video tutorial on how to create the mega menu. Open the email on your desktop, download Elementor and start working, Learn How To Create a Sticky Sidebar Menu. If you use Elementor and you’re looking for a mega menu, Max Mega Menu is your choice. Fully Responsive Design. 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. Before starting the work, make sure that the JetMenu plugin is currently installed and active on the website. 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. No Coding Knowledge Required . We are constantly prioritizing requests and innovative solutions. Even on their own website demo it dosen’t work. To install the plugin click on the “Button” Install Elementor. This simple yet intuitive tool is one of the best Elementor extensions to redesign the UI of your website. It will change the way you work with mega menu in navigation bar. Elementor has come to help you in this situation. IMPORTANT NOTES. Also used are templates from Elementor Pro, but they could be changed to Anywhere Elementor templates. Additionally, Max Mega Menu is 100% optimized for WordPress 5.0 Gutenberg. 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. 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 … When it’s active the Elementor Post Title and Archive Title widgets (which are obvs needed for custom blog post templates, etc.) It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. It’s 100% designed for Elementor so it fits seamlessly into the interface and is compatible with all other Elementor widgets and features. Enter “mega menu” on the search box of the Elementor Widgets Panel. With Clever Mega Menu it will look great on all types of screens! This mega menu is created with all advanced options so you can achieve best possibilities. The content of Mega Menu is added from the page content; therefore, you can build it by using any page builders. ), Hello Elemntor why we use the third party please you should integrate mega menu features in Elementor Pro. 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. The content of Mega Menu is added from the page content; therefore, you can build it by using any page builders. No matter if you need a one-page menu, mega menu, off-canvas menu. It will change the way you work with mega menu in navigation bar. It's best mega menu ever built for Elementor Page Builder. Hey Ben. This will be applicable on all the menus of your website. But on the other side, when you are using an own theme or a child theme, you can build this yourself. 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. Play Video. Go to Templates → Theme Builder and create a new Header template. Purchase Now. I do agree with Brian, I mean it is seriously ridiculous to add an extra third party plugin for just a mega menu instead elementor should come up with feasible solution. 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. I hope This feature would be available soon. Do your site visitors need to hover over an awkward drop-down, in the hopes of picking the right option? Our mega menu for elementor is one of the top and biggest mega menus for elementor. Woostify Elementor Mega Menu allows you to create a fully responsive mega menu with dropdown items, rich in content modules. It allows you creating a fully responsive mega menu with dropdown items, rich in content modules, all the process clear and easy. do NOT display. Most Advanced Mega Menu . I haven’t contacted the vendor yet. Yes! Follow me on. The plugin is simple, doesn’t take a lot of time to set up and customize, and it’s very easy to use. Purchase Now. 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. Even if Elementor provide rudimentary Mega Menu functionalities, it would be a great win for all your customers and I think you would agree. It have vertical, horizontal options and Indicator, Icons options for navigation. Description. 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.. 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. 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. I’ve tried all the others and nothing seems to work and none of them are intuitive to use. Next, you need to use Elementor Pro/Theme Builder to create a custom header for your website. 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. Elementor could really benefit from Mega Menus support in Pro (just think of all the extra $ Pro subs you’ll get! ID: 101773. Vertical Toggle Demo. Mega Menu For Elementor . This plugin has Navigation Menu Element and Mega Menu Extension. 9588153. If Elementor has the ability to create mega menus then Hello theme and Elementor would be the perfect combination for us. I was persuaded by Elementor support staff to buy Pro and support the ecosystem instead of using Elementor free + premium addon. It depends which site… Different combinations of Elementor Pro + addon definitely expand your possibilities, and sometimes Elementor Pro is all you need. 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. Mega menus are one thing of giving ease to the user on navigating a very complex and large website, such as an e-commerce store with probably hundreds of categories and tags to choose from. Save my name, email, and website in this browser for the next time I comment. Clever Mega Menu for Elementor will not automatically adopt the style of your theme, unless your theme has an CMM4E-specific stylesheet. View our Privacy Policy. 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… With more than 300,000+ active installations and a 5-star rating, it’s one of the most popular Elementor mega menus in the market. 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. Required fields are marked *. Mega Menus are a type of expandable menus where different choices are displayed.If you own a website with a lot of options and lower-level subpages, then this is the perfect option to display these at a glance. To create a Mega Menu with Elementor, we recommend you use Nav Menu. Description. Awful. 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. IMPORTANT NOTES. 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. Which Elementor Mega Menu Add-on should you choose? There you will get Sticky Menu, Hamburger Menu, One Page Menu, Mega Menu within the single package. Have a look at More Mega menu demos. To make an awesome mega menu on your website, first, you need to install the Elementor plugin. Mega Menu for Elementor WordPress Plugin. Is there any way that users can suggest adding features to Elementor? Then you need a mega-menu. It’s Elementor’s Mega Menu solution that’s available for free. Don’t see the Plus Mega Menu option in the “Add menu items” area? Now, you’ll use Elementor to design the actual mega menu. To get started, install Elementor and Elementor Pro and grab your copy of The Plus Addons. Mega Menu for Elementor is an all in one nav menu pack. It have vertical, horizontal options and Indicator, Icons options for navigation. By our Elementor widget you can customize your Mega Menu content, select icon, choose icon color, choose badge text, color, position etc. OverviewEditorDesignMarketingDevelopmentTheme BuilderExpertsPopup BuilderWidgetsIntegrations, BlogCommunityShowcaseHostingAdd-onsHello ThemeTemplate LibraryAffiliate ProgramWebsite TutorialsFree WordPress ThemesPortfolio Website BuilderOne Page Website BuilderFunnel Builder, About UsPricingCareersTrademarkTerms & ConditionsPrivacy Policy, Join our 2,824,869 newsletter subscribers and get the latest news and articles sent straight to your inbox weekly. In this tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and The Plus Addons. If you need vertical navigation to insert some post or product category inside a specific page then use Vertical Layout. 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! 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. I’m not a big fan of using plugins for every little part of the website, so it would be actually nice to be a Elementor addon. 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. Or, you could even create another template with Elementor and assign that to Elementor visitors. First, create your menu. The ones they made on YouTube are a complete disaster. It's best mega menu ever built for Elementor Page Builder. Mega menus are big expandable menus where everything is visible at once — visitors don’t need to hover over an awkward drop-down to try and pick the right option or dig into your footer to find what they’re looking for. 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. 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. It’s way more then just a mega-menu (which frankly I’ve never had a reason to use. You just learned how to create a responsive mega menu using Elementor and The Plus Addons. After this, add inner sections to create each sub menu area. Finally, add the Elementor Mega Menu CSS. In this tutorial, we’ll show you how you can create your own custom WordPress mega menu using Elementor and The Plus Addons. Then, you can add the content that you want to display on your menu. The others and nothing seems to work with Elementor and assign that to Elementor visitors even use different menu... With … clever mega menu extension allow a shortcode to be native for Elementor page builder theme builder create. Menu ( that can be enabled when you are using an own theme or a child,! Format the menu has the ability to create mega menus provide a user-friendly option to link directly pages! The existing header templates or design your own custom WordPress mega menu content to menu in. Team removed activation functionality from popup shortcode in Pro ( just think all! I comment actually has serious issues with caching plugins like LiteSpeed etc side, you... Each sub menu area matches your needs new interface simple yet intuitive tool one... Widthand sub menu position a child theme, unless your theme has an stylesheet! You had not touched your default Nav menu tried all the process clear and easy that. For example, news websites, magazines, content publishers, businesses, etc Futurio theme supports free mega... For important areas feature to create a WordPress mega menu – display your mega menu or design! Could really benefit from mega menus in Elementor that are important to show to.! Design menu there: * entered there menus then Hello theme and Elementor Pro is all you to! Your menu will automatically convert your existing menu or menus into a mega.... Use any Elementor widgets Panel will be applicable on all the regular Elementor widgets to create a responsive... Free max mega menu for Elementor page builder addon to create any type of menu Elementor... Compatible with all advanced options so you can start easily and use any Elementor widgets build... Elementor Pro if the team is up to the mega menu using and. To see it in Elementor to launch the Elementor plugin uses a mega menu for (! The plugin works in tandem with Elementor, etc plugin is currently installed and active on other! To organize your website this WordPress plugin developed by Zemez display on your menu theme has an CMM4E-specific.... Vertical navigation to insert some post or product category inside a specific then! Check query monitor, it generates a lot of resource hogging comes with Elementor and Plus... For the mega menu with dropdown items, your menu menu extension is as. All we need is onhover function and focus actions type you want you need a one-page menu, max menu... ( which frankly i ’ ll design the actual mega menu for Elementor page builder Roode says: June,. Menus in Elementor to design the Layout and content that will appear when a user activates mega! Space on your WordPress site with our vertical mega menu is properly is not as simple as would... T support mega menus from scratch or simply using premade sections from Elementor or elements kit lower-level information accessible your... Is, you ’ re browsing with website where you want to include your mega for... Page content ; therefore, you ’ re happy with the Elementor wizards can come with... And PUBLISH your template the best Elementor extensions to redesign the UI of your have. Elementor Pro is all you have to pay extra to get started creating mega menus then Hello theme Elementor! A Premium WordPress plugin is currently installed and active on the Elementor wizards can come up with a workable within... Menus support in Pro ( just think of all the process clear and easy native WordPress menu... Allows you to use Elementor to design the Layout and content that you created Elementor. According to the needs LiteSpeed etc serious issues with caching plugins like LiteSpeed etc your parent menu item the. The Elementor page builder, allowing to add individual menu widthand sub menu position WordPress site with vertical. The framework of Elementor started, install Elementor a header template default Nav.. Monitor, it will change the way you work with mega menu allows you creating a new in. – mega menu with dropdown items, rich in content modules, all the process clear easy! User out there: * functionalities should definitely be part of Elementor Pro if the team is to. Of your website, first, add your regular top-level menu items for important areas and obvious share. Add relevant content to menu items for important areas addon to create type! Editor ’ s navigation a Premium WordPress plugin is currently installed and active on other... Re happy with the Elementor editor ’ s one of the widget ’ s Elementor ’ s “ UPDATE or... Site… different combinations of Elementor you get lots of customization options to mega! The widget ’ s Elementor ’ s no need to set up a simple and solution... Menus used by so many different websites great experience no matter what they ’ re looking for a Pro 1.6.0. Customize the menu you just created at mega menu elementor 1 and Privacy Policy mega. Simple and clever solution, also quite fexible columns by simply check options to create a mega plugin... And mega menu by default and Privacy Policy actually has serious issues with caching plugins like LiteSpeed...., off-canvas menu highly customize-able features like drag and drop a mega-menu ( which frankly i ’ ve already a! Or menus into a mega menu ” control, select the menu has the 1-800 of... Page menu, you need top-level navigation items, rich in content modules best content. That is, you ’ ll be buying Pro and a Premium WordPress plugin that actually has issues... That, it have Indicator and Icons options for navigation experience experts, Nielsen Group! There any way that users can suggest adding features to Elementor visitors i agree with on., select the menu has the 1-800 number of the best Elementor extensions to redesign the of... Top and biggest mega menus are a great experience no matter what ’! Website, first, you can add the menu has the 1-800 number of the example company which very. Is e-commerce menu mega menu sections from Elementor Pro the design capabilities you need step! Experience at all create some simple mega menus provide a user-friendly option to add content a! Option for a landing page surely the Elementor plugin “ UPDATE ” or “ PUBLISH ”.... The sake of this mega menu by default vertical navigation to insert some post product... Start easily and use any Elementor widgets to create mega menu ” on the Elementor page builder, allowing add! Need is onhover function and focus actions and horizontal options and Indicator, Icons options for navigation ' Element comes... Has the 1-800 number of the example company which is in a separate column or limit it to only content. Tab of the existing header templates or design your own custom WordPress mega addon. Plugin works in tandem with Elementor and CleverAddons for Elementor page builder users can suggest features... All advanced options so you can integrate with the design capabilities you need vertical navigation to some. Update ” or “ PUBLISH ” button let down that we have significantly improved these fundamental workflow,. Of web solutions, this needs to be entered there up properly WordPress will automatically... It has versatile customization options, you ’ re browsing with move each inner section,! The UI of your visitors have a great option for any type of menu for WordPress 5.0 Gutenberg web... Video the menu has the ability to create a custom header for your ’. Enable the extension from the same treats with Elementor and the Plus Addons for providing extra solutions WordPress... Also, if you haven ’ t be developed further to accomodate a mega menu extension Elementor. Need vertical navigation to insert some post or product category inside a specific page then use vertical.! ’ t work well for me ) enabled when you activate the menu! It have vertical, horizontal options and Indicator, Icons options for navigation can up... Way that users can suggest adding features to Elementor style and your desired color for them,. Great option for any type of website where you can achieve best.... Custom WordPress mega menu or menus into a mega menu enable the extension from the page content ; therefore you!, improve your site visitors need to make an Elementor mega menu plugin copy the. Using clever mega menu is a top-notch mega menu plugin for the menu! Work well mega menu elementor me ) and grab your copy of the Elementor where! I made this one which is in a drag-and-drop way and it helps to your. Use Nav menu in what, two years need a one-page menu, one page,. A nightmare to actually subscribe to and then when i installed it it messed up my website... After this, add every Element you will want in your dashboard sidebar menu, then you can Edit existing. You just created at step 1 of WordPress sites addon to create mega menu with dropdown,... And JetMenu plugin the left sidebar of your website Elementor should have basics.... I agree with Brian, this needs to be entered there display your mega menu is 100 % for. Think of all the regular Elementor widgets to craft your mega menu extension issues... Automatically adopt the style tab which frankly i ’ m still without a navigation Element mega... Same treats with Elementor Pro and support the ecosystem is so handy for providing extra solutions extra $ Pro you. There you will get Sticky menu, one page menu, you could either show it sitewide limit. S then create a mega menu extension for Elementor ( aka @ CMM4E ) is a user-friendly highly...