in this tutorial I'm gonna show you how to create an off canvas menu using Elementor Pro an off campus menu is one that appears or slides in when a button is clicked it's super slick and pretty easy to do if you have any questions throughout this video please leave them in the comment section down below I'll try to answer them the best I can my name is Beorn allpass from W learning lab where we help you get better at WordPress you can earn more for yourself for your clients and for your business if you haven't done so yet make sure you click Subscribe ring the bell so you don't miss any of my future videos and we're getting started right now what we're building today is a simple menu button that your visitors can click on and it opens this off canvas menu that slides in from the side of the website and it has in this case our logo our menu system some social sharing widgets a map and an X to close or your visitors can click anywhere off the menu to close and you can customize all the content in your anything you can build an element or you can build into this off canvas menu right here and as a bonus if you want to learn how to create a custom login page like this one right here or a custom register page like this one right here I've linked to a video down below and the card up above where you can check out the video where I show how to do that step-by-step so you want to add those into your slick and new website build go ahead and do that check out that video I'll show you how and in this video this is our building this off canvas menu and right now this whole page is created with Elementor and this is a menu template or a header template with Elementor right here we are going to turn it off currently it says display throughout the whole site we're going to turn that off we're going to create a new template that's gonna have just the menu button so let's go into our dashboard let's go to our Elementor templates and then theme builder and here we have our main navigation which is the one we see at the top I'm going to click on edit with Elementor and I'm going to turn off the display settings so it does not appear all over the website click on this little up arrow beside the Update button click on display conditions hit the X Save and close now if we go back out to the main website that menu should be gone it's going to command clicked open new tab so the elementary menu is gone this is kind of a backup created by the theme which is the Astra theme in my case and this menu system here is created in the customizer so this might happen to you you might disable the element or menu but then you have another one pop-up that is not the element or menu where do you turn that off so potentially the problem you're facing is under appearance and then customize we're facing the same problem I am under header and then primary menu we can choose disable menu publish that come back out here refresh and now that menu is all gone we still a little search bar the search icon let's turn that to none and this is an Astra specific setup as well your theme may function differently and you may not even have this back up menu appear by the way now it's gone what Elementor does when it adds a header menu it disables any other menus that are there so that's why we had the elementary one showing at the beginning not the Astro one and if we created that menu button they were just overwrite whatever menu was here as well but I just wanted to have this clean and like this before I make that menu button so let's go back into the dashboard and then the theme builder under Elementor templates I'm gonna create a new one and close of these boxes I'm just going to quickly connect and activate Elementor Pro didn't realize I hadn't done that yet there we go we're activated now back to templates and then theme builder and let's go to that too let's click on add new I'm gonna choose a header I'm gonna call this a nap button I guess create template I'm not gonna use a block I'm going to add a button it's gonna be a very simple button I'm gonna align it to the right it's going to be menu gonna make it medium sized I'm gonna get small actually gonna add an icon I don't know what the I could be called for the mobile menu it's called a hamburger icon when I search for hamburger it shows this I'm gonna quickly scroll through here see if I can find it and this one's close aligned justified that's three bar or four bars usually the hamburger icon from a woman uses only three bars and here's one it's called I guess that's close enough insert looked pretty good to me let's add some spacing it's gonna make this button a different color gonna get orange there we go I'm gonna save this and publish it I'm gonna show this on all sites or all pages the entire site save and close refresh out here and our button is not there it could be that it is behind the header because this header has negative margin at the top because we wanted to overlay the Elementor menu template so we have to move the header up using negative margin so it might be behind there to test that theory let's go back into our header menu editor click on the section options go to advanced a tizzy index of 1 because the default is 0 update that so this header should be 0 if we add a 1 to the menu there's our menu button I'm gonna click on it just pops down a little bit nothing special happens we're gonna add the pop-up menu to that in just a second but first we have to build the pop-up menu so we're gonna do that right now let's go into the dashboard again exit out of the header editor under templates click on pop-ups click on add new pop-up I'm gonna call this off canvas off canvas menu Wow there we go great template we're not gonna use a template in this case so just click on X and this is the pop-up in its default form right here we're gonna change it quite a bit the first thing we're gonna do is under the popup settings you get there by going to the little gear icon we want to make the height fit to screen if you have it fit to content it just fits to whatever content you have in there we want to have it the full height of the screen we want to move it to the right we want to change the width to be smaller you get would be wide it depends on what you want to have in there for my case it's just going to be an image and the menu maybe some social widgets let's just make it like that and we're gonna have the close button visible we can turn that off or on it's a little X up here we want to have it visible so people when they click the pop-up they know they can click the X to close it even though they could just click out in this area as well we just want make sure that they have somebody can see to close it the overlay is this darkened area here we gotta have that on or off I'm going to turn mine off because I just want the mini to appear I don't want to have an overlay I'm gonna have an animation for when it enters so I'm gonna have a fade in from the right just like that because the menu button is on the right wouldn't make sense visually to fit it in from the left you could fade it in from the top or sorry the bottom there or the top there that could make sense I'll be interesting I'm gonna have it fade in from the right because that makes sense I think and you can change the animation speed right here you can make it fit him really slowly if you want steel slow that is I have to change the option that's very slow but maybe that's just what you need I'm gonna change it back to one point two I think it's a pretty good number under the style tab you can change some of the design options for the menu I try to choose contrasting colors so if my website is mostly white I'd have a darker color for the background of the menu if the websites most dark which in our case it is mostly dark well not really it's kind of half-and-half you choose if it's mostly darker more and lighter color I'm gonna add a background a grip background gradient and it's just gonna be a simple gray to wait for it great to gray but a light gray at the bottom a white even looks a little bit like silver that's all I'm gonna do for that the close button currently it's right here you can change the color for it right here so if you have a dark background you wouldn't be able to the X very clearly so you can change it to the light color if you wanted to I'm gonna keep mine like this actually you know what maybe I'll just change the background of the X to white make it even more apparent make it a bit bigger just so people and know it's there all right that's good enough not gonna mess with anything else for those options I'm gonna add some widgets I'm gonna start with an image drag and drop that right there I'm gonna add the site logo which is this right at the top I'm gonna add some padding at the top because I don't want that squished right to the top there we go it's pretty big well that's pretty good I mean maybe a little smaller there now we're gonna add a navigation menu since you have Elementor Pro otherwise wouldn't be able to do this we have nav menu as an option to choose our nav menu got a primary menu pulled in automatically I'm gonna make it vertical I'm gonna change it to not have a pointer the pointer is when I hover over had that big underline is the pointer in this case said that's a nun when I go to style I'm going to change the hover color from green to whatever this gray is this is choose our gray for the main color this one right here let's copy that put that in here as the hover color and you hover a little lighter just make a change a little bit don't you hover it's slightly lighter you can make the text bigger I think that's pretty good now we have a menu system in our sidebar gonna add some social widgets down below that social icons I should say looks pretty good I'm gonna change their colors so they match with the color of the menu system let's make them gray same gray as the menu when I hover it goes a little bit lighter that gets pretty good and you can put whatever you want down below this area if you wanted to have for example a map you can just pop that in there and I have a map that shows your business location or you could have an opt-in or a contact form or a testimonial all kinds of things you could put in this sidebar and once you have that created which we do now you click on publish we don't want any conditions click on save and close and then exit out of here exits a dashboard go to our theme builder edit the header with the button which is this one here headed with Elementor click on the button under link choose dynamic scroll down to actions and choose pop-up click on the pop-up in the drop down here we want it to open pop-up it can also toggle the pop-up both work just gonna keep my eyes open and you have to choose which pop-up you want here's the only want off canvas menu and now they're connected and I just update then you come back out here refresh this page click on menu and boom there's our menu the X is partly hidden up here if we're not logged in let's go to named kognito window click on menu now our X is much more reasonably placed we have our logo our menu our social buttons our map and we click on X to close it or we can just click anywhere we want to close it and but a Bing but a boom that's all done one last thing to consider is how does this look on mobile let's find out let's exit ID here exits dashboard let's go to appearance and customize and this should be working in here as well now we click on there and opens the menu so let's change to tablet view click on here and it does a double hamburger for the menu we can change that and for mobile phone just goes to the width of the screen I think that's quite nice just got change that hamburger menu option so let's X out here let's go back to our pop-ups edit with Elementor click on the pencil for this menu for the mobile drop-down we want to have no toggle button and that should keep it as an open menu like that save and close with no conditions exit here go back to customizer click on menu just confirm it still works still works as we expect go to tablet click on it and we have our full menu it did take some mobile styling so we have to adjust the styling in the same spot where he just turned off the mobile option for the hamburger menu or this even looks fine for this color scheme it looks pretty good and that's how we can integrate an off-campus menu into pretty much any website as long as it has Elementor Pro if you like what you see here and you want to get Elementor Pro please use the link in description down below it's an affiliate link I get a small commission if you buy through that link it does not make it more expensive for you it's just that Elementary sends me a small Commission for referring you and that really helps me keep making these videos for free and putting them out there for free on YouTube so you can get better at what you do so thank you very much if you do buy that link down there that's how it works I hope this video helps you if you haven't done so yet please make sure to click Subscribe the bow so you don't miss any of my future videos and next up you should watch this video right here where I speed test and compare the most popular themes of WordPress right now so you can pick the fastest one to build a fast website so check that out after that check this video down here which shows the 11 I think it's 11 different reasons hackers will hack your site even if you have no traffic so check out that video as well my name is Beorn all paths and WP learning lab till next time keep crushing it and I will see you in the next video .
Off Canvas Menu In WordPress Using Elementor
Tutorial to create custom login and registration page:
Link to off-canvas sidebar tutorial:
Here's the link for Elementor Pro (aff):
Get on the Unofficial Ultimate Guide To Elementor course waiting list here (no obligation):
Join our private Facebook group today!
To create an off canvas menu in WordPress is just takes a few simple steps.
I say simple, because with Elementor it's all point and click.
In this tutorial I show you, in detail, all the correct places to click to create your first off-canvas navigation menu.
And it looks very nice in mobile 🙂
Here are 20+ reasons why I host all my sites with SiteGround:
Post videos of your WordPress success using the hashtag #WPLLCommunity!
Grab your free 17-Point WordPress Pre-Launch PDF Checklist:
Download your exclusive 10-Point WP Security Checklist:
I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.
WP Learning Lab Channel: