 In this video, I'm going to show you how to do three things. Number one, I'm going to show you how to create a jump or anchor menu like this for a single landing page. Number two, I'm going to show you how to create a slide out menu using Elementor Popups just like this. And then number three, this is the big one right here. I'm going to show you how to make anchor or jump links inside slide out menus using Elementor Popups, where the menu closes after you click it. What's up everyone? I'm Jeffrey at Lightbox and I got to give a shout out to my man Stefano at Lightbox for helping me come up with a solution for this video. And that is for the anchor links closing inside a slide out menu. I created this pop up menu video last year. And many of you were asking, what about anchor links? Because by default, when you add anchor or jump links into a slide out menu using Elementor Popups, it does something like this. Like it just doesn't work at all. But I got a solution and this is how it looks like when we apply the solution. All we need to do is add a little code snippet and a class. I'm going to walk you through it. It's super easy. Even if you're a beginner, you'll be able to do this. And there are timestamps down in the description. That way you could jump to where you need inside this video. Let's start by building an anchor menu. And this is going to be for anybody new building these kind of layouts. Now, the first thing you want to do is build each of your sections, have them already. So I have my about section here, I got a service section here, and then a contact section. And what you want to do is go to the outer container, or the outer section that you're using, click on it, go to advance, and we want to give it an ID. For this one, I'm going to call it about I want to keep it really simple and easy to remember and use. The next one, I am going to go to the outer section of the service. And I'm going to call this one in the ID services. And this is important, make sure it's in the ID and not classes. Then I'm going to follow up this last one here, I'm going to do the same, I'm just going to give us an ID of contact. Now you can put whatever you want here is totally up to you. I like to keep things simple. Let's go ahead and update it. The next step is we need to build our menu. And there are two very common ways with element or to do this. The first one I'm going to show you is the one that I prefer and the one that I recommend, I feel it's best for SEO, and just best for overall good practices. And that is to use a default WordPress menu. So go back to your dashboard over here to appearance and over to your menus. And I already have one made here, but let me go ahead and create a new one. So right here, I'm going to give it a name, I'm going to call this one jump menu. And then from here, create menu, and I want to add all custom links. So for this one, I'm going to have this the about. So this is going to be for the about now to get it to scroll. Remember that ID we gave to the about section, which we just added about, we want to give it that we want to whatever you put for your CSS ID, we put it in here, but you want to make sure you add a hashtag in front of it, no spacing at all. Go ahead and add that once you have all of them added, it should look like this, the URL, this should match whatever you put inside the ID. But right here, inside the label, you could give it whatever you want. Maybe I want to call this our services, maybe up here for about I want to put about us, that is totally fine. What matters is going to be this URL with the hashtag. Next, I'm going to put this over inside my header template. So navigate over to templates and to theme builder. And I already have my header template here. So I'm going to add this here. And what I want to do is I want to add the WordPress menu widget. Now this used to be the nav menu widget is the exact same thing, they just changed the name on it. So go ahead and drop this in up over here. All right, and then we're going to style it up. I already have my pre built styles right over here. Let me go ahead and give it a text color. I want to remove all of this spacing because by default it comes with tons of spacing that aren't needed. You can see now the pink box is shrinking up. And I want to give it my own spacing. And this just is me styling it up. I'm going to take this up to 60 pixels right over here. And then from here, you can style it up any way that you like. Like I like to have fun and make it super creative. It's totally up to you. One thing I do want to remove is this pointer underline. I always take that one out. And then the other thing you got to make sure you have is the right menu. So I already built my anchor menu. But let's take a look at the jump menu that we just built together. So choose whichever menu that you built. And let's take a look at how it looks like on the front end. And now we can test it out. And we can see that, yep, they are scrolling to the sections they need to scroll on. Now desktop is finished. That one was kind of easy. But let's set it up for mobile to build our slide out menu. What we're going to do is we're going to go over here to templates and over to pop ups. And we're going to build a pop up and make it slide out. Now I'm going to add a new one here. I'm going to give this a name, a jump menu, just to keep everything consistent. Let's go ahead and create the template. Now there's quite a few things to do in here. I'm going to walk you through the steps of setting this up and getting started. First, let's go ahead and turn this off. We don't want to use any of the default. We could build our own. The first thing we want to do is set up our width. Now for here, I like to go here and add VW because I'm thinking about how is this going to work on mobile. Usually I want it to slide almost all the way over, but still leave a little bit of space. So somebody could click on that and close it. It just makes it better for accessibility, but maybe you want it to slide all the way out 100%. So by using the VW, we could choose the percentage. Now I'm going to set this at 90% but test it on your phone after you built it and you got it on mobile. So you can see what fits right next for the height. Let's go ahead and put fit to screen. This way our menu is full screen. We are going to center this. I just find it works better centered. You might want to use top. This is totally your preference. Then we want to position this. Now I want my menu to slide out this way, slide out from right to left. So I'm going to put this to the right. Close button. I want to leave it on overlay. I could leave it on for the entrance and exit animations is totally up to you. Whatever your preference is, play around with it and have fun. This is a chance where you get to really just use your own creativity. But if you wanted to say slide out from the right, let's go ahead and slide in from the right. Do the same thing. Make it go slide out from the right. So that way it comes in and goes back out in the same direction. And then you're going to want to adjust this animation duration because it's at 1.2 seconds. That's what this is. That is super, super slow. Like I'm going to change it all the way over to like point to like I wanted to fly in and fly out with just very minimal animation. And then here you could just leave it as it is. I never really need to change anything in here. If you want, you could always adjust the HTML tag. If you are setting anything up for SEO, but really pop up menus aren't meant for SEO. That's a whole other topic right there. So I just don't worry about this here. And preview settings, I leave alone as well. Next up though, the style. So I do want to add my background here. I don't want to add the background as I'm putting in elements here because I just find that sometimes I might get issues with cropping or with some white space showing. So to be on the safe side and to make sure everything is full, either I will put in my color here or I'll go ahead and put in an image, which could be also really fun to do. So I'm going to throw this image right here. I'm going to fix it up center center. No repeat and display size cover for the box shadow. You can style this up in the box shadow basically is going to be here along the side. So style it up the way that you like. It is good to have a little bit to give some depth, but it all depends on the design that you are going for on the overlay. Now you can see here, it's a very dark overlay. I don't want to have such a dark overlay. First, I want to make sure I'm choosing one of my brand colors. And then I'm going to take this down really low because I want the overlay to be kind of faint. Next up, the close button, we can see it's all the way up over here. So you can go ahead and give it a size. I like to make mine kind of big. I'm going to turn this to 36 pixels. I'm going to give it an accent color, something that's easy to see. And then for my background, I really don't like putting a background on it. Just feel like it interferes with the design. You could move it over and down. I'm going to take this to, actually, let me put it by pixels so I got more control over it. I'm going to do 40 by 40. After this, let's go over to the advanced. First off, I want people to be able to close it if they click or tap on the overlay. This is great for accessibility. Now right here, disable page scrolling. This is pretty handy, right? I do like that they added this here. And that's it. You're set up. It's good to go. The next step though, we need to add our menu. So I am going to go over here. I'm going to use my flex container. And then from here, let's go ahead and add our menu widget. All right, from here, put in menu, and we're going to use the same exact one that we put in our desktop. So I'm going to put my menu widget here. Let's go ahead and style it up so that way I could see it. I got my styles here. Do you know what? I'm going to make this one bigger. So keep this in mind. When you are doing your mobile menus and anything on mobile, text is a little bit smaller. I want my menus easy to use. I want them to be very accessible because I got very big thumbs and I know how hard it is to try to tap on things that are very tiny and close to each other. So be generous with it. All right, back over here to content. We're going to make this go vertical. All right, we're going to take out this pointer underline right here. And then for the breakpoints, go ahead and put in none. We don't need to worry about mobile because this is going to be our mobile. And then when we turn off that breakpoint, we're basically turned off the mobile part of the menu widget. All right, from here, I'm going to just let me change the color. I forgot to do that. So I'll go ahead and turn that white. And now again, let's go ahead and remove this default padding. I really wish they did not add this default padding because it does mess with the design. Space between is the one to use right here. This is going to be for best practices. So these two up over here, vertical and horizontal padding, these are not good when it comes to using best practices inside design. They add in spacing that should not be there. This one, however, is the right way to control your spacing with your menu. Because if we see the pink box around our element, well, that pink box is hugging it, yet we still got control over even consistent spacing. That's what we want to see. And now we got our menu, but we could do anything else that we want here. This is our slide out menu, feel free to get creative. You could do things like drop your social icons in here and do your social media, you could put call to actions in here, you can style it up, design it the way that you like. It's totally up to you. Have fun. What I suggest when you are doing this and you're styling it up and you're designing it, find another mobile menu from another website you really like. Use that for your inspiration and your guidance and recreate something like that with Elementor, but put your own twist on it. Once we're all done with this, let's go ahead and click on publish. Don't put on any conditions, leave the conditions off. Just go over here to save and close. Next step, we got to go back over to our header template, because now we got to put the icon. That way, when you click on it, the menu slides out from here, I am going to use a button widget. Let's take the button widget, let's drop it over here. Let me get my navigator so I can move it around more easily. All right, from here now, we don't need any text at also remove the text. What we're going to do is use an icon. So you could use some of the default icons that Elementor has in here, you could put it in, let me see a line, you could use like something like this or use whatever you wanted there, or you could go ahead and upload your own icon. So I got this icon right here. I know it's hard to see right there, but now you can see the icon. It's a very simple one, you could get a free one anywhere. So I upload it right here. Let's go to your link, select on dynamic tags, scroll down until you see pop up, click on it again, and down here where it says pop up, go ahead and type in the title to your pop up, find it, and then connect it. Now let's go ahead and update it, take a look at the front end. And you can see it's working now, it's coming out kind of fast. Remember that animation, we can slow that down a bit. All right, back over here, let's finish this setup right here. You can see it comes with all that default spacing right there. We're going to go to padding, just go ahead and put in zero. That'll remove all of that. And then your background right here, I have a transparent global class right here, just make it transparent. And then for the size, well, you could go in here, and you could control the size of your icon, just like this, I usually like to make it big. And now back in the front end, we have our slide out menu that we could use for our mobile menu. Or if we want to use our desktop, go for it. And that brings us to part three, we need to fix these links right in here, because if I click them, this is what it does. So we do got to fix for it. First, go back over to your dashboard. From here, you want to go over to elements or and to custom code. And we're going to add a new one here. Now go ahead and call yours whatever you want. I'm going to call mine jump menu. All right, and then we want to set this to body and this is going to be for better performance. We also need to turn on the low jQuery, because this is a jQuery code snippet, we're going to add now here is a snippet right here. There's a link inside the description to take you to it. That's going to make it a lot easier. Please don't be overwhelmed. All we're doing is copying and pasting this in. You're going to copy and paste it from script to script. Right here, let's copy that. And drop it in here. And I'm going to publish it. You can leave it on an entire site. You know, if you're only using this on a specific page, well, you know, you could adjust it from there. Now there is one thing we need to edit in here. All right, and don't worry about it, it's not overwhelming. And that is going to be our template ID. So go back to your dashboard to your templates and pop ups, and look for the pop up that you built for your menu. So we use this jump menu right here. If we go here to the template ID, you can see it is 343. So I need to go back over to my code. And right over here where it says ID, you're just going to change these don't remove the spacing. Don't change anything else. I'm just going to put 343. Let's go ahead and update it. And just for your own edification, I'm going to break this down to show you what we're doing over here. This is targeting three different scenarios. All right, so this is going to be right here for our menu widget, the WordPress menu widget. This is targeting that right there. This one right here is targeting the icon list. So if you want to use an icon list for your menu, inside your pop out slider, this will work with that. And then if you just want to add a button, say you just want to put in a contact button, that will slide down to a certain part of the page. Well, that's what this snippet does right here. And then we have this same class right over here, this lightbox jump menu, you could change it if you want if you're comfortable, but this is a class that we are going to use. Let's go ahead and copy that. I'm going to go back over to my pop up right here. This is my menu that I built in the pop up. And then from here, I'm going to go over to advance to CSS classes. And I'm going to put it in there. Let's go ahead and update it. Again, do not add a condition, just click on save and close. And let's take a look at the front end. And when we go to our menu, now we can see that it closes when they click on it. It gives a great user experience. It adds just a really nice way to navigate. And this is great if you want to use this kind of style for mobile. Now back over here to the pop up real quick, I just want to make sure we cover all basis here. Now if you were going to use a an icon list, and you want to make your menu an icon list, I've already built this for different scenarios. And I'm just going to paste this in because it's just going to make things go a lot easier and a lot faster. And let me add a little bit of spacing right here a gap. So we got some breathing room. Alright, now if we take out this class right over here, this lightbox jump menu class, let's go ahead and remove that and add that over here and update that. And then we'll see that it works for the icon list as well. And I got even one more, let's say you want to add a button to it. Alright, I got a button right here. Let me copy this. So just in case you might use it inside another scenario, let me paste this right here. Alright, I'm going to put the class in it. And let me go back here and remove the class. And if you notice, I already removed the class from the WordPress nav menu widget. Thing is, you can only use it on one. So only on one item, you can't mix and match on it. That's the only caveat. But on these single page sliders, we should always keep it minimal and really easy to use anyways. Let me go ahead and refresh this. Now we got our button here and it works on the button. Now I know that was quite a bit to unpack. It was a bit more than what I was expecting. But I wanted to make sure that I provided you with the full solution. And I got a question for you. Would you like me to make a video on designing mobile menus? If so, drop them aside in the comments. Let me know if I get enough people asking. I'll definitely put a lot of energy into it. And don't forget to do all that good YouTube stuff, you know, like and subscribe. It does help to support the channel and is much appreciated. Well, thank you for watching and I'll be back again soon with more web design related content. Thank you.