hi guys Hamza here and welcome to this tutorial in this video I'm going to show you how to create a mobile mega menu in elementa and the beauty about it you won't have to buy any plugin and this is how the menu is going to look like so we have our different menu items when I click on the about I get this and I can just come back here and close over about then come over to services and this is what I have it's a mega menu under the services menu items so let's dive straight in and see how we do that before I actually start this video I'm making was inspired by questions I got on the recent video that I had released on how to create mega menus in elementa and I got questions like I just tried it and doesn't work on mobile is there something to setup extra to work on mobile another question I got also once awesome how does this behave on mobile screens and again another question I got was also have you tested it on mobile and tablets so in this video I'm going to show you exactly how you can create this mega menu using alimentar and it will be and you will be able to use it on mobile devices so in order to create that mobile menu you need three things and the very first thing is you need a theme that is ready for elementa you need elemental Pro and then you need a free plugin called clever mega menu for Elementor once you have those installed next thing is to create a header because that's where your menu will be and to create a header you come over to templates and then you go to theme builder and then you heat create a new header and once you select new header you hit a template and create a header however I'm not going to go now into this tutorial because I already made it and I'm just going to leave a link up here so that you can go see how you created us so let me just open myself header which is right here and we get started so once you are here and you have your already created header what you need to do is to add a menu item and to add a menu item you basically come over to the elements section and search for the menu item but in this case you are going to select the WordPress navigation item not the navigation item element from Elementor because this element is not compatible with this plugin it is the navigation menu element from WordPress that is that is working really well with this plugin so you just drag it over to your header menu column so I'll just tell it this so that you see that I'm really using the one I'm telling you to use so once you drag it over there then you select the menu you want to use so I had not actually told you that you also have to create a menu but I'm just going to take you through just a little bit to that what you need to do is just come on the menus in WordPress and then you said create a new menu and once you create your new menu you give it the name make them mobile say create that menu and once you create that menu then you can give it the name you want after giving it the name you want you can add a number of other elements to that menu so in this case I'm not going to create a new menu I'm just going to use an already existing menu that I have and that is the mega demo so the mega demo menu that I have is the one I said to primary and it's the one that I'm going to sit in my head and this is how it is this is the mega demo and it's the one that is appearing in my header maybe you have a question that what is this that I'm seeing this gray and blue rectangular boxes appear once you have the clever mega menu plug-in installed and activated below the menu itself after the menu settings there will come an option for clever mega menu settings for elementa so you just click that and once you have that enabled then those boxes will appear up here if this setting is not activated then you won't be able to create a mega menu for your menu items so we just have to hit save so now what we have already we have our header and it has our main menu that we are going to be using for our project so let's save it up and we close up this so we no longer need this we just head over back here so we are done with a header and now the menu stylings just like these icons for example the icon under about the hover effects the expand icon and the close icon on the menu items all those can now be set using the clever mega menu options you come under mega menu and then select mega menu schemes you can create your own skin and this skin will be the one that is representing how your makeup menu looks like maybe something I also have to mention this mega menu not only works on mobile but also works on desktop devices all this tiling is brought up by these settings you can able in the menu skins of the clever mega menu options when we hit over the edit button for the default skin like I said you can create your own skin but I just wanted to continue I just wanted to make my customizations using the default skin what you see here for example a link text which is this is the link text before however is what is set up here in the skin and there is a lot of other customization you can be using this plugin for your menu styling for example also you can have a different styling for your mobile panel for the mega panel the flyout once it comes out but however I'm not going to go into that because I'm basically using that default settings for this plugin the other thing you only no need to do is to save your settings and then I asked you to go and now create your mega menu item now once you click on any of these items for example the about it pops up in a new window and in there you can start creating your mega menu items however you are limited on the mobile settings if you are going to edit within the clever mega menu mobile settings so the option here or the trick that I used here is to set up everything using the templates I already created for example already created the blog template which is representing everything Anna under the about page you have two options to create a mega menu elements for your mega menu and in this case you can just click over any of these rectangles that are peering or new menu items just like this and this is an option that the clever mega menu gives you and once it loads up your mega menu will appear here for it's a plain canvas but once you have your elements you can just import them here or you just have to create them from scratch the reason why I am opposed to creating your elements from this canvas is that you are limited on the mobile options to customize your mega menu elements so that way I asked you to create everything using a template and then you can import that template direct into your mega menu let me just take you through how you can create your templates when you create your templates using the elemental template option then you have the ability to actually make customizations on your mobile visibility of the elements you don't have these options if you are going to use them clever mega menu when you are styling you're clever when you are styling your menu elements just like this so in this case I am unable to change the stylings the padding's and anything for any of these elements here yet here I have the capacity to change the padding you know the styling of any of the elements within here so that's why I say that you you better off create a template using the elemental template option or the blocks option and then you import that into this canvas for the clever mega menu that brings you your created template as you created it here it will be imported directly into Starla's and make sure to select yes so that it comes over with the import settings because you want that anything that you set up under this template for example the padding here on the left I made sure it is zero on the left and all the other sites I left it to be too because when I leave it on the left zero then on my mobile menu here it will it will appear really nice and sweet it fits very well because the screen size here is 360 and that means when if I leave my mega menu to have also a padding on the other hand it will be out of the box that is holding the mega menu items and so that they only appear really nice and sweet within here that way once you create your template and you have it saved exit this is services and then you just come straight to your element that is going to have that that mega menu item you already created once you select that item then you select that template that you created you insert the template and say yes you accept it to come with the settings that you had already set up from that template so that's how you guys can create this template and have them imported into the particular elements that you are going to have in this case I only need one since this is the same template I had created earlier and this is how it looks like even on mobile so this is how it looks like but just like I had say I can't make any changes here to do with a padding or a styling of this same element because clever mega menu doesn't give me that option so once I have everything set up nice and sweet I just say and then I update so once I update I just refresh over here my page and then I see how it looks like so just click over here come over to services and boom this is what it looks like yeah so guys that's how you can create a mobile mega menu using the clever mega menu plug-in which is free of charge and all this is done using your Elementor pro just to do a small recap you need to download that level make a menu plug-in – you need to – create the header and select WordPress navigation element you still up you menu using the clever mega menu skins and then you create your templates using elementa and after creating your templates using Elementor you save them and then you import them into the clever mega menu element canvas once you have that saved then you close over here and then you save your menu that way you will have your mega menu for the mobile devices affected and working nice and sweet just like any of these or any of this thank you so much for watching of this video brought to value and that now you can create mobile mega menus for your web projects in case of any questions feel free to leave them down in the comment box below and if you are new to this channel I hope people just like you establish digital presence from scratch so don't forget to hit the subscribe button and the bell icon so that you don't miss out on new content when I push it out and if you like this video please smash the like button thank you so much and see you in my next video you .
Get Elementor Pro:
In this video, i am going to show you in 5 steps how to create mobile mega menus in elementor step by step.
I also share with you the trick i use to get responsive mobile mega menus using the free clever mega menu plugin for elementor.
All you need for this tutorial is an elementor ready theme, elementor pro and clever mega menu plugin (free plugin)
This elementor mega menu tutorial will require you to have knowledge in creating WordPress menus and headers in elementor or simply checkout this channel for these tutorials.
Hope this brings you value.
Enjoy and please don't forget to subscribe.
Get a Domain and WebHosting
(Use coupon code * GOTECHUG60 * for upto 60.5% off all plans)
Get Astra Theme –
Get Elementor Page Builder:
Get Envato Elements ( Millions of creative digital assets):
Awesome Elementor Extensions (Addons)
Get Crocoblock Jet Plugins here:
Get Ultimate Addons for Elementor:
Get Essential Addons for Elementor:
Get Power Pack for Elementor here:
Get Premium Addons here:
Get Piotnet Addons for Elementor:
Get Smart Sliders 3 for Elementor:
Get The Plus Addons for Elementor:
Get Ulimited Elementor for Elementor:
Speed Up WordPress Site
Get LastPass Password Manager:
Hire on Fiverr (Get 20% off 1st Order):
*Join my monthly newsletter via blog*
*Follow GoTechUG on Social Media*
For business inquiries send to: firstname.lastname@example.org
*Snail Mail Address* (Send 'thank yous' and fan stuff)
Uganda, East Africa
DISCLAIMER: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission at NO extra cost to you. That way, it helps support this channel and make more videos just like this.