Full Screen Menu Elementor Pro

in this video i'm gonna show you how to build a beautiful motion full screen menu with elementor pro without any code and of course i'll show you how to do it on mobile too okay so first of all let's take a look at what we're going to build so let me scroll back up and as you can see if i click on the menu icon we have a slide down and a slide up at the same time and then if i click we have a slide out up so how do we do this so first of all we need a few things to complete this project and the first thing is a wordpress theme so for that you want to go to appearance themes and then you want to click on add new so i've already installed astra but basically you can install pretty much any compatible theme that you want when i say compatible is compatible with elementor so just type astra and as you can see i've already installed it so next you want to go to plugins add new and then you want to install elementor so elementor should be here on the first page but in case you don't see it just go to the search field and just type elementor and then once again you will need to click on install and then activate next you want to install elementor pro and for that you want to click on upload plugin and then you just want to go and fetch the zip file that you've downloaded once you've purchased elementor pro just click on choose file and then proceed on installing the same way just install and activate now if you don't have elementor pro yet you will find an affiliate link in the description below please know that i do receive a commission if you purchase through my link but i only recommend elementor pro because i absolutely love it and commission actually support the channel which is why i can keep on creating free content just for you okay once you've installed elementor the next step is to create a home page so for that go to pages add new and then you're just going to add the title it's going to be home and if you're using astra as i am i'm going to disable the title on the page and then i'm just going to click on publish to publish my page next you want to go to settings reading and then once you're on that page you want to click on a static page for the home page so click on the static page and then you're just going to go and select the page that you want which i've already done once you're ready all you need to do is click on save changes next you want to edit the page you've just built and click on edit with elementor now as you can see i've already created the homepage to make this tutorial faster it's a fictional website about a band called matt2 and their debut album and tour called crazy love so we have a full screen section with a button as you can see we have some parallax here and then another section below now obviously you don't need to do all of this because we're going to focus on the header and the full screen navigation but i just wanted to make it more real and i also wanted to show you how creative you can get with elementor okay next we need to create our header so for that from the dashboard you want to go to templates theme builder and then you want to click on add new then you're going to select header give your header a name and click on create template now i've already created that template so i'm just going to open it okay for the moment you don't see anything and that's on purpose so i'm just going to show you how to proceed so first of all you want to click on the plus sign here and we're going to select two columns now it can be hard to actually touch the controls when it's here on top so i'm going to open the explorer so is command plus i on a mac i guess control plus i on a pc or you can just click on the explorer icon actually it's the navigator icon here at the bottom left corner so as you can see i can toggle it on and off okay next i want to make sure that i click on the section that i just created and next in the settings i want to change the content width to full width next i want to go to advanced and i'm going to give it a padding of 30 pixels all around then i'm going to click on the widgets icon that you can see here and then i'm just going to drag an image i could drag the site logo here but i'm just going to show you how to do it with an image i'm just going to drag an image here and then i'm going to click on choose image and i've already added a few graphic assets so i'm just going to pick one logo so i'm going to pick actually this one here next i'm going to align it on the left hand side and as a link i'm going to select custom url and then in the dynamic tags icon i'm just going to select site url so anytime someone clicks on it it goes back to the home page next click on style and i'm going to give it a width of 120 pixels okay next let's go back to the widgets icon and i'm just going to drag an icon so type icon and i'm just going to drag it on the right hand side so let me select the icon that i want i'm going to type grid for grip lines and this is the one i'm going to pick so for the link we do that later on because we need to link it to our full screen menu that we haven't built yet and we're going to align it on the right hand side now in the style tab i'm just going to change the color to my main red color and for the size let me make it slightly smaller next i'm going to select my column and then pick middle for vertical alignment i'm going to do the same thing for the first column okay i had already created this template so here at the bottom left corner i have the update button but if it's the first time you're building the template it will be a publish button and once you click on publish it's going to ask you which are the display conditions so this is what you're going to see so by default it would be like this all you need to do is click add on the entire website then click save and close okay now let's take a look at what we have on the front end so this is the current front end before i refresh the page so there's no navigation as you can see so let me refresh and voila looking good and you could actually stop here for the header and if that's the case you can skip to the next section but if like me you want to take it a step further and make this transparent on top of the hero image let me show you how we do this so let's go back and still with our section selected you want to click on advanced and then you want to unlink the margin values by clicking on the little link icon here and then we want to give it a negative margin now the number that i'm going to use is going to be really specific to your own header depending on the height of your logo and so on so in my case i did 138 and then put the minus sign in front and next i want to give it a high z index of 9999 in case you don't know the higher the number the higher that layer is going to be on top of the others next i want to click on update to update my work okay now let's refresh the page and as you can see it works great we have our logo here and we have the hamburger icon here so that works great but it's not really visible because of the red color and spoiler alert when we go to the tablet and mobile version is going to look really good in red so if i change it to white it's not going to work for the mobile and tablet and if i leave it red it's not going to work for the desktop so here's the trick so let's go back so i'm just going to duplicate the logo and i'm going to duplicate the icon here so basically the first logo here is going to be for mobile and tablet so i'm just going to click on it then go to advanced then click on responsive and i'm going to hide it on the desktop because i just want this to be for mobile and tablet i'm gonna do exactly the same thing for the icon okay next i'm gonna change this logo here with another version i have a white version so this is the one i'm going to pick you can't see it but it's there and same thing for the icon i'm just going to go to style and change the color to white now let me select my image back again go to advanced responsive and this time i want to hide it on the tablet and on the mobile and same thing for the second icon go to responsive and i want to hide it on the tablet and the mobile so let me click on update okay now let's refresh and as you can see now it's white in desktop and if i go into the mobile mode it's not looking really good at the moment because we haven't set it up yet correctly but as you can see we have the red version here as we were expecting and if i go back to the desktop it's the white version okay so now let's take care of the tablet and mobile versions so you want to click on the responsive mode icon at the bottom left corner of the window and first of all we're going to take care of the tablet version so let's select our first column you want to make sure it's 50 and 50 for the second column also next you want to select the section and then we're going to go to advanced unlink the margin values and we're going to give it a negative bottom of 168. so 168 and then i just put the minus sign in front next i'm going to click on the mobile version then i'm going to select my first column and make sure it's 50 then select my second column and once again make sure it's 50 next i'm going to change the width of the image so click on the image go to style and i'm going to give it a width of 80 pixels now i know it does not look aligned but it will be so next i want to click on the section once again and i'm going to give it a padding of 20 pixels all around and next i'm going to click on update okay so let's go back to the front end and now let me refresh the page and as you can see it's looking much better and well aligned but as you can see here at the bottom we still need to take care of the negative margin so let's go back and with our section selected on the advanced tab make sure you unlink the margin values and i'm going to give it a negative margin of minus 108 pixels so let me update this okay now let's refresh and as you can see now it's perfectly aligned so you will need to play with this okay next we want to create our menu in the wordpress backend so for that go to appearance menus and then you want to create a new menu i've already done it so basically let me show you create a new menu then type new menu and click on create menu and then you're going to start adding the pages that you want to add to the menu and then you can reorder rename and so on once you're happy make sure you click on save menu now in my case i've already created the menu for this tutorial and it's the demo menu okay now is the time to create our full screen menu so for that you want to go to templates pop-ups and then you want to click on add new make sure you select pop-up and i'm going to give it a name so it's going to be pop-up full menu then click on create template okay we don't need any of this so i'm just going to close this and first you want to click on the plus and we're going to create a two columns layout okay but before we take care of our section we're going to click on the gear icon here at the bottom left corner of the window so that we can edit the settings for the pop-up so first of all you want to change the width to 100 vw then for the height you want to select custom vh and we're going to give it 100 vh next you want to make sure that the overlay is not selected because we don't need this so we don't need any entrance animation or just the default one so that's fine and for the exit animation you want it to slide out up and for the animation duration it's zero comma six next you wanna click on style choose a background type and we want to make it transparent so just drag the slider all the way to the left next you want to click on the close button accordion and we want to change the vertical position to 30 pixels the horizontal position to 35 pixels and we want to change the color to white so you won't see it now so just in case you're wondering the close button is here and of course once we make it white you won't see it anymore but that's for good reason that you see in a moment and next for the size we want to give it a size of 30 pixels okay at this stage let's click on publish and we want to add a condition so we want to include it on the entire website just click on next next and save and close okay next we can actually start building the full screen menu select our section here or in the navigator and then we want to change the content width to full width for the height we want to make it a minimum height of 100 vh next we want to change the column position to stretch and next you want to click on the first column icon here so for the first column we want to give it a width of 60 and for that i'm just going to drag until i see 60 next i want to vertical align in the middle and next i'm going to click on the style tab give it a background type and i'm just going to pick a black color next click on advanced and i'm going to give it a padding of 70 pixels all around next click on the motion effects accordion and i'm going to give it a entrance animation of sliding down and i want to make it fast for the animation duration okay next i want to add a navigation menu widget so i'm going to click on the widgets icon and then i'm just going to type menu so this is the nav menu widget okay so first of all you want to select the right menu so let me pick the demo menu that i've prepared next you want to change the layout to drop down next you want to change the alignment to center and the toggle button to none okay next click on the style tab and then for the normal text color we want to pick red in my case then for the background color i want this to be transparent now for the hover i want it to be white for the text color and for the background still transparent and same thing for the active so white for the text color and transparent next you want to click on typography and we're going to give it a size of 99 and by the way in case you're wondering i'm using the poppins font okay next i want to change the vertical padding to 50 so already looking much better so let me click on update to save our work okay next we want to select our second column by clicking on the icon here next we want to change the vertical align to space between then we want to go to style and i'm going to pick a background type classic and give it the red color that i've chosen next you want to click on advanced and i'm going to give it a padding of 70 pixels all around okay next click on the motion effects accordion and we want an entrance animation of sliding up and we want the animation duration to be fast and i'm going to add an image okay so let me pick the white version of the logo okay next i'm going to make sure that it's aligned on the right hand side and for the link let me select custom url dynamic tags and site url next click on style pixel and the width is going to be 150 pixels so let me just change that here once again let me click on the widgets icon okay next once again i want to click on the widgets icon and i'm going to add an icon list so i'm just going to drag it here then i want to go to style make sure it's aligned on the right hand side and i'm just going to duplicate by right clicking on the action list so i duplicate it to another icon list now to make this file so i'm just going to show you the final result and there you go so let me close the navigator and as you can see it's looking really good so let me click on update okay we're almost ready to test but if you recall we haven't linked our icon here to the actual pop-up that we've just built so for that let's go back to elementor with our header that we created previously in this tutorial and first of all you want to open the navigator and expand the section so i've renamed the two columns left and right so it makes it easier so basically you also want to expand each column and we need to take care of the mobile hamburger and the desktop hamburger icon okay let's pick the mobile menu icon first and then within content you want to go down to where it says link then click on the dynamic tags icon and scroll down until you see pop-up then click on the wrench icon click on all and then you can start typing and i called it full menu so now we should be set and we need to do the same thing for the desktop so once again dynamic tags pop-up wrench icon all and then full menu which is the name i gave to my pop-up then let's click on update okay let's refresh and now let's click and as you can see it's beautiful working fine so one more time down and up and back up now you may be wondering once we close the pop-up why doesn't it go the same way it arrived so with the first column going back up and the second column going back down well the reason is simple there is no such option within elementor pro so it's totally doable with code but that's a totally different beast but i still think it looks gorgeous so now let's take a look at the tablet version and it looks good here but when i click on the menu that's a bit weird and same thing for the mobile version so let's take a look really really weird okay back in elementor you want to click on the responsive mode icon and next you want to select the tablet version and let's select our first column and then for the column width is going to be 100 next you want to click on advanced we're going to unlink the padding values and we're going to give it a top of zero a right of 50 bottom zero and left 50. next you want to select our nav menu then you want to go to style and we're going to change the typography size to 50 and next we want to change the vertical padding to 40. next let's click on our second column and we want to give it 100 of width next click on advanced and give it a padding of 50 pixels all around now let's click on update okay now back to the front end let's refresh our page and now let's click and as you can see it's looking much much better okay back in elementor you want to click on the mobile version and next you want to select our first column once again should be 100 it is by default because we did it in the tablet version but just to make sure and then you want to go to advanced and give it a padding of 20 pixels all around okay next you want to select our nav menu and then we want to go to typography and give it a font size of 30 pixels next you want to change the vertical padding to 30. and you may want to change this number depending on the number of items in your navigation so let's try 20 for example it's still looking good okay next we want to select our image and then we want to go to style and give it a width of 120 pixels okay once you're happy just click on update okay now let's refresh our page and now as you can see it's gorgeous okay so one more time let's take a look at what we've built so when i click on the menu icon with this gorgeous slide up and slide down dual full screen menu and then when we click to close it goes back up and here is the tablet version and the mobile version now if you enjoyed this tutorial a thumbs up would be much appreciated and of course if you want more of these make sure you subscribe and smash the notification bell so that you don't miss anything now don't forget i'm trying to build the content i wish i had when i got started so that's why i'm building all of these tutorials and i hope you enjoy them so i'll see you in the next one and until then take care and stay safe

Channel: Kaycinho The Digital Alchemist

Views: 7,326

Keywords: full screen menu elementor pro, full screen menu elementor, full screen menu, full screen menu for elementor plugin, elementor full screen menu, elementor pro header, elementor mobile menu full screen, elementor animated menu, elementor design, elementor design tips, elementor design tricks, elementor how to, elementor popup, elementor popup box, elementor popup menu, elementor tricks, animated menu wordpress, fullscreen menu, mega menu, wordpress menu, wordpress plugin

Id: i_WUewRAzVU

Length: 20min 27sec (1227 seconds)

Published: Wed Aug 11 2021