 Now I got a special love when it comes to a clean functioning mobile menu. In fact, anytime I visit a website on my phone and that website looks dope, one of the first things I do is I check out their mobile menu because I want to see what the designer and developer came up with. That to me tells me the kind of care and thought that went into the website. Now, unfortunately, with elements or the default mobile menu that's in their menu widget, well, it doesn't really have any options. All you got this little drop down thing. It's, it's kind of old, it's outdated, doesn't really have a good user experience with it. But this has also been solved with Elementor's popups, because we can now use Elementor's popups to create our own mobile menus where we have the freedom of creativity and flexibility and can make them look the way we want them to look. What's up everyone? I'm Jeffrey at Lightbox and in this video, I'm going to take you step by step on creating a really clean and modern looking mobile menu that's going to have great user experience by using Elementor's popups. You're not going to need to put in any code. You're not going to need to add in any additional plugins. The only thing you're going to need for this video is going to be Elementor and Elementor Pro and well, you kind of need Elementor Pro to really unlock the power of Elementor. And if you don't have it, there is a link in the description. Well, let's go ahead and have some fun now and jump into Elementor. The first step would be to plan out your style, look for other sites for inspiration, find other mobile menus, and find one that you really like that you're going to use as your guide and as a style that you want to use and have that close by. That's going to help you with your design process. For this tutorial, we're going to use this as our example site. This is actually one I'm building for myself right now. And as you can see, we have a very basic menu up here. It's just a logo, our menu right here that is using Elementor's menu widget and then a call to action. And if we make the site responsive and take a look at how it looked like on a mobile device, well, this is the default Elementor widget and it just does this little drop down. This is what we're going to fix. And what we're going to build right here with an Elementor pop up is a slide out menu where the menu slides all the way out and it has a full screen on it. And we could design it and style it up to the way that we like. So let's go ahead and get started. So from here, go to your back end and go to your templates, add a new template. And then we're going to create a section, name your section, whatever you want to name it. I'm going to call my mobile menu. I'm going to call a mobile menu to because I already got one created. And then from here, we're not going to use any of these pre built. So click that off. And we're going to build and design our mobile menu here. And you would do it just like you do any other part of your Elementor website, you would add a new section. And just use one column right here is remember, this is a mobile menu. So we're only going to build a small part of it. And you will style it up the way that you like. And this is the reason why it's important to have your inspiration design another website that you like closed by that way you could use that as your guide and sort of replicate that. Now I already have one created for the sake of this video and to keep it moving along. I'm going to go over to the one that I built right here. And let me click on edit with Elementor and show you the one that I built. So this is my mobile menu that we're going to use and put in there. You can see I styled up the section I gave plenty of spacing on it 100 pixels on top and bottom a little bit of spacing on the sides because I want to make sure that the menu isn't too close to the edge of the phone when somebody opens it up. And then I made my menu very simple. Here's the thing when it comes to menus, especially if you don't have too many pages, it's best to make it just simple and easy to use. And one way to do that is to make the text kind of big. You can see these are kind of like title sizes right here. One thing you want to keep in mind is the size you see here on the screen for the desktop. It's going to be a whole lot smaller on the phone. And if somebody's trying to click to a menu to a page, they might be like me and have a fat thumb or they might not be able to see on their phone as well. Or they might have like a really small phone like an iPhone mini, which makes it hard. So I like to keep mine bold and a bit bigger, have spacing and make it easier to use because that is going to give a good user experience by improving the UX and UI. So once you got your mobile menu design, after that's done, now we're going to create a pop up. Let's go back over to our dashboard. And let's go to templates and select on pop ups. And here we're going to add a new pop up. Go ahead and name it what you like. I'm gonna call my mobile menu slide out because that's what I'm going to make here. I'm going to make a slide out mobile menu, select on create template. And we're not going to use any of these right here, we're going to go over to my templates. And we're going to find the one that we built. So this is the one that I built. It is a section. I'm just going to insert that right into my pop up. So this imports the design that we built and really quick, the reason why I prefer and I'm suggesting for everyone to design your mobile menu in a section template is because this is going to give you more of a better canvas for designing and building than the pop up. Now that we have our mobile menu in our pop up, the next step would be to fix up the pop up settings to do that, navigate over here all the way to the bottom left hand corner. This is where we're going to find the settings for our pop up. Click on that and let's go through each one of them and set them up. Now if this we could control the width of our pop up, what we want to do is we want to switch it over to the VW this is vertical width. And this number is the percentage. This is the percentage of the width of your pop up. So if we're at 100, well, it's going to be 100% of the screen. I want to give about 95% because I do want a little bit of space on the side on the menu. I don't want to go in all the way to the edge, but almost to it. So we'll leave it at 95%. But this is up to you in your preference. Next up, we're going to put height and we're going to put fit to screen. And then right here for content position. Well, you can leave it at the top. It's all good. It might look a little funny right here. But remember, this is going to be on the phone. So we're not going to see a whole screen like this for our position. This is really important. Choose which side you want it to come from. If you wanted to slide from the left side or the right side, you want to choose which side I'm going to choose the right because that's where I want mine to slide out from. Now we got the overlay right here and the close button. You could choose those if you want to use them. And right here, the animation. So I want this to slide out from the right to the left. So I'm going to go all the way down to sliding and slide in from the right right here for the exit animation, I'm going to be slide out from the right. And that way that's going to slide in this way. And it's going to slide back out that way. And for the animation duration, this is how quickly it's going to slide in. Now 1.2 seconds is very slow. I'm going to move this all the way over to a 0.5 right now. And later on my phone, I'm going to test it out and adjust it based to how it feels on the phone. Now for good practice, it's good to go through each one of these one at a time in a row and just to make sure you get everything done. There's nothing that needs to be changed in general settings. Nothing that needs to be changed in preview settings. But let's go over here to stop. Now I do want to change the background because you see right here I got this light blue. I want to make sure this in any part of the pop up has the same color. So it blends in together and I have it in my global colors. Now you can see it all matches. The overlay is this section right here. Let's make it super light. That's way too dark. I want to make it just barely noticeable. There we go. That's cool right there. And then the close button. Again, right here by default, it's pretty small. And just remember on the phone, it's going to look a whole lot smaller. So let's make this a bit bigger. All right. That looks cool right there. And then after I test it on the phone, I'll adjust it. And you could change the design as far as the color of it if you want it to be a different color. I choose to keep it dark because it's easier to see. And with that, everything is styled up here inside our pop up settings. You could go through the advanced right here. Now for the mobile menu, I don't really do any of these right here. I leave everything as it is. This is good by default. These settings are better using it when you're using the pop up for like pop up newsletters and promotions and things like that. Not for the menu. So I suggest keeping everything in the advanced alone, just keep it as it is. Now let's go ahead and publish. We're not going to add any conditions. Don't click on add condition. Don't go to any of these. All we're going to do is save and close our pop up now is good to go. Now let's go ahead and do some work on our header. So navigate back to your dashboard. Go over to your templates and go to your theme builder. What we're going to do here is we're going to create two sections. One of them, this is going to be our desktop menu. The next section we're going to create, we're going to create our mobile menu right here. And we're going to hide them based on the screen size. So first let's design our mobile menu here. And I'm going to make this super easy to do. Go over to your section, make sure you have two columns, navigate over here to content with and go ahead and put it at full width. Let's add a little bit of spacing on the side because we want to make sure our menu and logo aren't too close to the screen. I'm going to add just 12 pixels on each side for the padding in the section. Now let's add in our logo here for mobile. I'm going to do that with the image widget. There's the logo right there. Let's go ahead. I'm going to put that at full. It's SVG is really small anyways. Next I'm going to add an image on the right hand side. And I have right here this image which is an SVG of a hamburger menu. And I'll insert that now to get an image like this is really easy. I suggest going over here to icon scout and you could get them for free. All you got to do is type in their menu and scroll down and you could see we'll go to the icons right here and there you go. Just go over to a menu like this. Go to download and then you could just download the SVG. Now let's go ahead and make this a lot smaller. You can see it's way too big. So I'm going to do this on pixels. I'm going to make this about 36. Yeah about 36. We'll try it out there. Now one thing you notice this is higher than this one right here. So let's fix that. Go over to your column. Click on column right here. Go to vertical line and select on middle. Go over to this column right here. Click on that one. Go to vertical line and select on middle. And then you'll see that everything inside the column they will align up inside the middle. That's the easy fix for this right here. Now let's go back to our menu image right here and we want to make this aligned to the right. Next we're going to go over here to link and this is where the magic happens with connecting the pop up. Go over here to custom URL. Next select on dynamic tags and then scroll down until you find pop up. Select on pop up and when you have this now click on pop up and right here where it says pop up you want to click on not all you want to select on all but we want to find the pop up that we created. So we're going to type in the name of it. It'll come up and then select on that right there. Go ahead and click on update. Now our pop up is connected but we need to style this up a bit. So let's fix this whole menu situation that we have going on. So first off we want to hide this. Let's click on our desktop menu. Go to the section and select on advance. Go over to responsive and let's hide it on tablet and hide it on mobile. Select on update. Now let's go over to our section that has our mobile menu and go over to advance to responsive and let's hide this on desktop. So now they aren't going to show at the same time. And then you could click on responsive and let's go ahead and take this down to mobile right here and you can see now we have the logo on top and then we have the menu on the bottom. Go over to your column right here right here underneath layout column with put in 50 which is we're going to give that 50 let's go over to this column go over to column with and also let's do 50. Now they're aligned together. Go ahead and click on update and there's our desktop menu. Let's make this smaller right here we see our mobile menu pop up right there and click it on that. Look at that bam there it goes. Now we got a clean mobile menu using elementary pop up and it's super easy to do and what's great about this is you can make your menu simple like this simple clean and easy to use or you can even get more creative you could put social media links there there's a lot of things you could do to get more creative instead of being limited and as you can see it's pretty easy to create a clean looking modern mobile menu now using the pop ups it's really important to take that time and give it that extra special care and love into your website to make sure your visitors and the people viewing your website especially on their phone have that good user experience well i hope this video helped and if it did go ahead and do all that good youtube stuff you know like subscribe i'll definitely have more videos just like this coming out and i'll be back again soon with more elementary related and web design related content thank you