How to create THIS responsive MEGA MENU with Elementor Pro

how you can create this beautiful Mega menu using Elementor Pro with also a link hover effect now in this video Let's dive in so this is our website and here we want to create a mega menu in the header but before we do that I would recommend that you set up Global fonts and Global colors because this will make your website creation much more efficient and also easier to manage you can do this over the website settings from Elementor so then over here you find global colors you can set up all your colors that you want to use on your website and when you go back you can also find the global fonts and here I would recommend that you set up all the fonts that you want to use so I have fewer fonts for different headings for the text for button for the menu after you set up Global fonts and Global colors you can go back to the WordPress dashboard because we need to activate some features from Elementor we go to Elementor and then settings and we go to the features and here we activate the flexbox container but give attention when you activate the flexbox container that this will affect your whole website so you don't have the older sections from Elementor anymore you can see this when I click on the plus icon now we are using only the flexbox containers which is by the way faster in loading times and also better in responsive designs we activate the nested elements and also the menu after you activated those three things then you save your changes and now we can create a mega menu so therefore we go under templates to our theme Builder and over here we go to our header I already have created one so I added this one if you don't have one you can add a new one now we added our header I just X the existing one out I just will start with a blank one so let me add our containers I will take this one there we have about okay this is now the potentials to 25 on the on the left side and this one should be about 75 on the right side and now we want to give this section A little background so let's give it a style in dark blue first and the left container we want to have our side logo a little bit too big let's give it a width of 60 percent this looks good and I also want this logo to be in the center of the container how Elementor containers will work I will provide you a link in the video description where someone else explained it you get to know the containers a little more because you can see you have here now different settings that you can use for the containers in the right container we want to have our menu the WordPress menu this is the old menu and we now want to have our new menu this is the widget down here so we just drag and drop it inside and I can't read the fonts so let me change it to White and also the typography please on menu and now under the content tab I can provide here the names so the first I name it Industries and also can provide the link over here Industries I want this menu on the right side so I also say to the end now let me also change the hover color because I don't like this one I changed it to Mint and also the active color should be also mint now this looks much better and now this is just like an icon list and we don't have our drop down menu so that's why we go back to the content and from here we can also activate drop down content and if we do this let me just do this for all the three and now you can see we have these drop down arrows and when I click on it then it opens a new section over here I can drag and drop my widgets over here in this case I click the plus icon because I want to have this six containers inside and I want to have a button in one container and below the button should be also a little text for some description we use buttons and not headings or text because with buttons you can easily create and hover effect and we write here retail the link is to our retail page we want to have the button small this is okay left alignment is also okay then this style should be our menu font text color should be in primary the background type please and white the Border radius we don't need it padding we set it to zero percent then it's going fully to the left and we want as a text hover color the mint color so now this looks much better you can also say in this container by clicking over here that we want to have the gaps to zero that takes us a little closer and I want to have a little padding over to the top 30 pixel should be enough and also to the right side there is a also 30 pixels good now I just copy paste it to all the other containers I also changed the name of them now I added also some description to each of the links and when I just look at the preview of the website this looks pretty nice and why is this more right than the food okay because we say the gap between the elements should be zeroed and depending is on the top and on the right 30 pixels so also copy this one and paste this style over here paste the style over here so far so good now we also added the menu over here because here we can say for example that we want the drop down effect open on hover or on click so if I select on click then this menu only opens when I click on it but I I want to have it on Hover I can also say the animation to fade in now when I hover over Industries this works pretty nice let me just save it and go to the preview of the page so when I now hover over Industries then we can see this Mega menu fades in and we can now click to our Pages then we can also check the responsive settings so when I go on mobile then we can see okay this is now underneath but I don't want it I want the width over here to not 75 pixel can we please use percent it's the logo 75 and our menu only 25 percent this would be good then I want also the content in the center and the color of this menu should be in white menu toggle then over here I can say white yes that's it and then when I click over here you can see this is now our responsive menu and I can open this one and then I have also the mega menu over here and now let's update the page and take a look at it and now we are finished and we can see when we hover over Industries we have our Mega menu over here I hope this video was helpful if you have any questions please let me know in the comments and then thanks for watching we will see us in the next video foreign

Channel: Erik | Webdesiign

Views: 4,409

Keywords:

Id: e-7JdEWVZ94

Length: 6min 16sec (376 seconds)

Published: Sun Apr 16 2023