 Hey everyone. I hope you all are having a good start to 2023. I thought I'm going to kick off this year by doing a few revamps because I still got some tutorials that many of you are following and well Elementor. It's made some really big changes in the last couple of years. So I want to make sure you all are getting some updated information and we're going to kick everything off with one of my favorite parts of a website and that is the mobile menu. So what we're going to do inside this video and I got a few surprises. All right, what we're going to do is first I'm going to show you how to design the mobile menu so that way it comes out looking cool like this and you could you know be well on your way to get super creative as you like building your mobile menu. All right the second part I'm going to show you how to create a slide out menu for Elementor without a plugin or an add-on. We're just going to use a little bit of HTML a little bit of CSS. I'm going to copy and paste it in and I'm going to walk you through it. And then for those of you that don't really want to play around with HTML and CSS I'm going to show a much more simplified way of doing this by using an off canvas widget inside of Elementor add-on which means you do need a plugin but it makes it a lot easier. All right so there are timestamps inside the description. That way you could bounce around to the part that you need but I do suggest to watch all the way through at least one time just to get a good understanding of building a mobile menu. At least one that isn't boring you know so before we get started just make sure to subscribe and do all that good YouTube stuff it's much appreciated. All right let's go ahead and create these mobile menus. The first step is we need to design our mobile menu. From here we're going to go over to templates then to save templates. And we are going to add a new one and we're going to select on section. Call yours whatever you want I'm going to call my new mobile menu. And then let's create the template. Now inside here in our template this is where we design and build our mobile menu any way that we like so however it looks when it slides out it's going to be built and designed in here. I'm not going to select these we're going to walk through it really quickly right here so I am using containers and I strongly suggest everybody else to go forward and use containers they are much better now this is a big improvement by Elementor. All right so we're going to select on one container now we got to make sure that this is full height and full width. We want to make sure that no matter what when it goes down to mobile size it covers the entire screen. So from here you can leave your width here you can just take it to 100% for your height I'm going to put it on VH and go all the way up to 100. Also make sure it's at 100 as well on mobile. All right cool we're good right there now we need to add some padding. And remember this is for mobile it's going to look different than it does on desktop and we got to give a bit of space on the right and left hand side that way if your menu is aligned to the right or left it's not all the way touching it we want to make sure there's some space so that way people's thumbs it's accessible and it's easy to use. I usually use 20 pixels all the way around I think 20 or 24 are very good spacings to use I wouldn't use anything less than 12 because it'll be too close to the edges your your menus will be right up there against the edges and we want to have that space but you could go all the way up to 40 even if you want more space. Let me go ahead and publish this real quick just so that way I could update it. All right next I want to add a background right here I want to put a cool background image on this. Now I've been playing around with Mid Journey I got some images here that I got from Mid Journey I'm really digging it I got some videos coming up on it but here's some that I found I've been playing with I think is super cool. All right so I'm going to set this up center center I'm going to put no repeat and on my size I'm going to put cover so we're good to go right there. Now I'm going to be aligning my menu to the left so this is something I like to do because I want to make sure the menu is easy to use and easy to see. I like to add a gradients overlay so I'm going to add this right here I'm going to use black and black both the same color for my overlay I'm going to change my angle a bit I'm going to change this over to 90 all right and now on the second one right here I want to reduce the opacity see the goal that I'm trying to get right here is to have the shade on one side underneath the text so it's easier to see the menu items but then the other side to be more clear so we can see that really dope image that we got so I'm going to remove this overlay I'm going to remove it all the way in fact and then I'm going to turn the opacity up to 100 now you see right here on desktop it's a lot bigger but on mobile you're going to have half of it shaded and it's going to have this very soft gradient going over to colors right here and we're only going on one side now you can play around the angle and you can move it around to whichever way that you want this is one of the tricks that I use and I use this one quite often all right let me go ahead and update now our background and everything is good it's time to start adding in our items all right I'm going to put our logo right over here so let me throw an image in here I'm going to find my logo I'm going to put a white one right here and let me put this at full align it to the left and I'm I want this to be small so I'm going to make this 100 pixels right here I want it to be small all right next up now this is where I'm going to add my menu there are two ways that I like to do this two widgets now the first widget is going to be the nav menu widget this one is the best for seo now if you are if your menu has a drop down say you got a sub item that somebody needs to click and drops down to more items you got to use this one right here this is the solution to that but if you want to get creative and have like you know images or something next to your menu items an icon list also could work too now I use icon list this widget right here sometimes to create my menus uh it's pretty easy to do and the method I'm going to show you with the slide out we could use both but I tried to use a nav menu most of time because the nav menu is more seo friendly so let's go ahead and drop in the nav menu right here because I do have this drop down item and that was one of the challenges I heard many people talking about now right here what we need to do is we have to change this to a drop down so select on drop down and right away it's hard to see because of the gray let me change the color of this really quick so that way you know it's easy to see so when we go to the drop down now we got the toggle right here but we don't need that toggle so what we got to do now is go here to the toggle button and select on none and now we have our drop down button if you have a menu that somebody needs a drop down and see sub menu items on now we got it right here now let's go ahead and quickly style everything up I'm going to go here to the background and well I'm just going to change the opacity all the way to zero I'm going to go to hover I'm going to do the same thing background all the way to zero I don't want any colors showing up any background colors because it'll break the design we don't need that it's a mobile menu people don't see hovers when they're on mobile because they're tapping on it all right now let's go over to click on normal go over to our text color we're going to turn this white and now we got to change the typography I'm going to make this one kind of big you can make it small you can style it up the way that you like but just remember on phone fonts appear a bit smaller when you are looking on your phone and I like my menus especially if there's only a few menu items I like them to be clean but easy to use all right so next up I want to put a call to action button over here like a contact this button and then drop some social media on the bottom so let me pull out a button right here I'm going to drop a button right below I'm not going to style up the button too much because it's already styled up in my global styles but style up your button as you like and now I want to draw some space create some space in between the menu items and the call to action so it stands out so I'm going to go back over here to my nav menu and on the padding I'm going to oops let me unlink this I am going to push it all the way down I'm going to push it down 40 pixels I want to create a lot of space I want this to stand out all right next up I want to do some social media links so let's go here to social media and not the share button our social media icons we're going to drop that below the button now I'm going to align these to the left right here and we're only going to do Facebook and YouTube it's pretty much the two that I'm on so you know works out all right let's go ahead and change the colors you can change these up we could fix the sizes I want to keep the sizes a bit small I don't want these to stand out that much I want my call to action to stand out I want the menu to be easy to use all right uh let's change the colors on this though I believe the primary color is the background so I'm just going to put that right there on uh transparent my voice crack right there transparent all right and then I want to add a bit of spacing I'm going to add 20 pixels right here and then I could make these a bit bigger maybe also 20 and now I want to create a good amount of space as well let me create some space I go to the button and put some padding on the bottom let me do 40 again right here that's a good even space all right so this looks cool now we could leave it like this there's another option we could do as well we could center this in the middle and now after looking at this I think I want to do that I think I want to center I'm going to go back to my container and I'm going to go back and let me even the padding right here and if you want you could go to your container you could use flex now this is why containers are so good we could go ahead and justify this to the center if you want to put this in the middle we could go ahead and align our items here in the middle and we could even make these right here not this one we go to our nav menu and we could align these inside the center I want to create a bit more spacing between the menu and the items right here so let me put in 20 pixels on the bottom let's update this now we got a mobile menu you know what I got this shading right here I'm going to align this though back to the left because I think it's going to help out a lot more now just really quick I do want to address this if you want to align everything to the right there are no options inside the nav menu widget which means either you got to use some css to do it or you got to use the icon list and that's why I said the icon list is also useful because unfortunately the nav menu widget is it just has a lot of limitations it's something that hasn't been updated really uh since I started using Elementor which is why I'm doing this tutorial to get more options all right let's go ahead and update this this is how to style up and design and build this now if we were to go in mobile you know this is how it'll look like on mobile and then when you look on the phone it's going to look a whole lot cleaner it's going to look really dope for the first menu we are going to build this with just html and css no plugin is required all you need is Elementor so let's go ahead and edit our header template we could go here to edit Elementor and edit your header or you could go inside the back end over to your templates and your theme builder I'm using the old school theme builder I just like this one but if you got the new one it's the same thing just find the header you're working on and go ahead and edit with it I'm going to do this directly from the page that I'm working on so we just have a basic header right here our logo and our menu right over here I am using the nav menu widget here I'm going to add an html widget now so let's add the html all right let me flip that around sometimes I got to use a navigator it just makes it a lot easier to move our widgets around all right now we got a copy and paste in the snippet so I have a link inside the description it'll take you to this post right here on my site and it has the code so for the html there are two different snippets and I'll explain this really quick so we have one snippet right here which is for the icons list widget if you do want to use you know the icons list and the reason why I have this right here is because if you look here we have this nav tag that wraps around the icons list now when you have a menu it's important to have that nav tag because that lets google know that hey this is a navigation this is a menu it's just for best scl practices but if we are using the nav menu widget it already has a nav tag in it and we don't want to use two nav tags so this one is the same code snippet it is just using a div and since we're using the nav menu widget for this tutorial I'm going to copy and paste the snippet right here and I'll put that in the html code all right now that we got the code there's just one thing we need to edit here and that is where we have the shortcode so there's this shortcode snippet that goes right here but you got to put your own and to find the right shortcode snippet let's go back over to your templates and go to the one that can be created so we created this one the new mobile menu and right here we got the shortcode let's copy and paste that and then edit it right here inside the html and update it so we're good to go right now in html that's it next step was at our css now for the css for this one I am going to put my css inside the customizer it is totally up to you where you want to put yours at I have videos on that a lot of opinions on it but you'll see right here we're already looking at and seeing the template so we can't see it here so since the shortcode is here we're seeing it right here all right let's go over to our css now back to my blog right here and we got the css here let's go ahead and copy the entire thing copy that and paste it and you'll see it just turned into a hamburger we could click on it and it's sliding out but it looks a little funny right all right there's just one thing that we need to change right here all right remember our shortcode right here is Elementor template 305 so get the number of your shortcode all right mine's 305 let's go here to the top and I have this part with comments where we need to make some edits for this one we just need to edit the number right here ours is 305 so you just edit that part that's it and then it's going to be full with and I'm not sure if this is a bug inside Elementor if there's just something not right I'm not sure but I wasn't able to get a full width for the entire template but this is a fix right over here so you just got to edit that now the only other parts you would need to edit are going to be right here the hamburger color which is right now black like if I were to put in let's say I just put in red you'll see it changes to red and then right here for the close X so you could change the close button right here I am going to change this let's say I just put in blue you'll see now it's blue which you could hardly see but that is all you need to change in there so in case if you are using say a dark top menu or you have like a transparent menu you need it to be white or vice versa you have full control over them I'm going to change this back to black and the close to white and now that's it now there is one thing I got to say that this is working with hello theme all right if you use another theme that might change it I'm not sure I haven't tested it out on others this method right here this is best for those who are a little bit comfortable at least with CSS because just keep in mind elements or updates as code and updates them and maybe a year from now they might change a few things so this method right here is best for those comfortable with HTML CSS but definitely give it a try if there are any troubles with it you might need to make a few tweaks to it or something like that but if you don't want to touch any code and you just want it to have the most simple solution that brings us on to option number two for creating your slideouts now before we go to option two let me finish this up just so that way you can see how a completed menu would look like using this let me refresh this because now the CSS is in there and we're going to see the update on the site all right so our nav menu widget is here now if we wanted to use just a full screen menu we wouldn't have this menu here but since we do we're only going to use this on mobile let's go ahead and go to advance and we're going to hide it making it responsive so we're going to hide this on desktop so it's not showing we'll update this and you can't see it here but if we're to preview it you'll see now we have our menu back to the way it was now we wanted to show on tablet and mobile i'm going to make it break on tablet and mobile so let's go over here to our nav menu widget go to our responsive and we're going to hide this on tablet and mobile and if we shrink this right here well we're going to see a break we got our mobile menu right here our slide out menu and it looks pretty dope much better than a boring just little drop down one that we get with the default mentor so we're good to go on there this will work for any off canvas menu and just about every single add-on for Elementor has an off canvas widget for croco block it's going to be the hamburger panel widget and you can see here this is how it works uh my other go to that i like to use is also dynamic content for Elementor they also have uh they have one as well it's a bit more creative right here pretty cool it's not as straightforward as just like a simple slide out but i do definitely gotta i just gotta give a shout out because dynamic content uh and croco block these are my go-tos and my favorite add-ons uh another one is ultimate add-on for Elementor the astro team they make very well coded uh add-ons and plugins so well whatever you're using it should have it for this one we're using jet blocks with croco block now that i gotta activate it now anytime i activate uh add-on though this is really important i don't want to take you too far ahead i'm going to go to the jet plugin settings and i want to turn off all the widgets except for the one i'm going to use so i added the plugin here and let's turn all of them off except for the one that i'm using because i don't need all this code to load i want to keep the website as light as possible if you guys know me i try not to use plugins or add-ons at all but if i do if i do this is what i do i turn off everything and only turn on the one that i use all right let me go ahead and refresh this i'm going to delete this right here because i'm going to put the off canvas menu which is right over here the jet block hamburger panel let me put that up here use my navigator to move it over all right now we could go over here to our hamburger panel and we could choose our template i'm just going to put in menu i got my new mobile menu right here and you can see it's a whole lot easier that's it it's already going we already did the work setting this up now the next part would be well you got all these options right left you could slide you could fade you could zoom you could do all that so you could have fun with it but for the width i want to make this 100 and i'm going to remove the padding on it now we got a full out menu you could go in and you know remove this you could customize and change the background of the icon and change your icons around it's a much easier way the only tradeoff is you're adding a plug in for it well i hope this video was helpful and i hope your mobile menus are starting to look a whole lot better i love to be able to see others get creative freedom you know so well all the links that you need everything are inside the description and please don't forget that good youtube stuff with the likes and subscribes it does really help to support this channel thank you all for watching and i'll be back again soon