Off-canvas Menu in Elementor PRO

hello girls and boys welcome to Elementor tips and tricks video clips I received a few emails from subscribers asking me to publish tutorial on how to create off canvas menu in Elementor since that was the most wanted subject or a topic I decided to go for it another reason is the fact that creating off canvas menu is a piece of cake with Elementor and I meant to prove more precisely okay so let's go here we have a regular menu in the page header that I want to get rid of and place the hamburger menu icon instead the icon this hamburger item should be a button that triggers the the appearance of the off canvas menu our menu should slide in from the right-hand side of the screen and then slide out once closed as simple as there first of all I'm going to create that off canvas menu and for that very purpose I'll be using elementor's popup template so let's go to the WordPress admin and from the templates I'll select pop-ups and then add new from the top of the screen my pop-up should have a title of course and the title is going to be off canvas menu be sure to memorize the title because we're gonna need it later a little bit later you see why okay I'll just shut the templates library down because I want to build my pop-up from scratch under the Settings tab layout panel we have to take care about the few crucial parameters with I'll use 360 pixels which will make it fit even the smallest known viewport size height height should fit the screen content position is going to be top horizontal position aligned to the right hand side and vertical position to top overlay show overlay of course why because this is how you prevent user interaction with all other elements when our off canvas menu is visible or active think of it as a protective layer atop of the content close button show because I want to allow users to be able to close the menu by using button even though the menu can be closed by clicking anywhere outside the pop-up the entrance animation is going to be fade in right that will make our menu to slide and fade in slide and fade in from the right-hand side in the same time I could also choose sliding right effect as well but I kinda prefer faith and slide exit animation fade out right identical to the entrance animation but this one will be used to make our menu disappear from the screen animation duration point 0.5 seconds general settings and previous settings panels are just fine and no need to change anything here let's now handle the styles so I'm going to open the style tab background type will be classic I'll just pick some great background color something like 0 0 1 1 1 1 not a pitch-black but rather a charcoal image border type and border radius are not required which doesn't mean you cannot use them if needed it's optional of course but I'm ok with the background color only box shadow is already set by the default and I'll just leave as this now the overlay panel as I said the overlay prevents user interaction with other elements on page such as hyperlinks and I'll make it fully transparent why because I want to keep the functionality and in the same time make everything on page clearly visible so whenever users do mouse click anywhere outside the Afghanistan you it'll shut down close button panel it helps me to customize my clothes button of course so the position will be inside remember that we are dealing with the popups opposition of the close button can be outside as well but in this case it doesn't make any sense as you can see the button position can be adjusted both vertically and horizontally maybe I'm going to need these a little bit later but at this point I'll just leave as is and I definitely need to change the color of my clothes buttons is going to be white Walter white background color is not needed now the horror stage will be white with the sly transparency like 70% okay and finally sighs the button is too small so I'll make it a little bit bigger 24 pixels pixels okay now the Advanced tab there's only one thing that I'm about to change here and which is the padding I guess that's something like 20 pixels of padding to all four sides of the pop-up is going to be okay increase if you think it's not enough decrease in case you think it's too much as you wish now as you can see there are many other options under Advanced tab but these are mostly needed when the pop-up is used as a real popup window however since I'm using it to emulate the of canvas menu I will not need any of these so forget about these and now finally let's add our menu and maybe a couple of other things below the menu because you can actually use that pop-up as a side bar and fill it up with plenty of information maybe to add the contact info social links latest posts posts Google ads whatever this is where the main menu resides everyone needs to open it once in a while which means everyone will see what's below the menu so open the widgets panel then drag and drop the nav menu widget the most likely you'll have to select your own menu here the one you got created in WordPress admin under advanced manuals in case there's none to be selected here you gotta go back to WordPress admin and create the menu ok you got to create the menu first I'll just leave that abstract menu number one that I use for a testing purpose that's gonna be fine layout layout has to be drop-down horizontal version doesn't make any sense here and vertical version of the menu still shows up menus or mouse over like dropdowns okay submenu indicator I'm going to select chevron chevron is nice full width leave know I'll get back to this one a little bit later because I have spotted a bug here I'm gonna show you how the bug looks like airline is going to be a side that will make the menu items aligned to the left hand side another option is to make the items aligned to the center however for some reason Elementor does not allow items alignment to the right hand side I'm not sure why nor I was able to figure out toggle button none we don't need another hamburger icon because very soon we are about to make our own before I continue to style up my menu let me show you the bug that I mentioned a few seconds ago okay so if I try to make the menu full width it will stretch over the borders of the pop-up you cannot see the menu anymore but I assure you it's there on the line on the left hand side it's hidden ok so it's better idea to use custom CSS panel to make it full width if needed if ever needed because Elementor is doing something wrong here all right I forgot one thing I want to remove the columns gap and widget space I prefer to manage these by using margins rather than landing Elementor do it for me okay so I'm gonna highlight the section Layout tab and choose no gap from the columns Gap drop-down now highlight the column and enter 0 into widget space and put field okay my menu is still unstyled so I'll just do the quick style up first of all let's add some top margin to the section as you can see the section over labs the close button a little bit so highlight the section Advanced tab unlink margin fields then enter something like 50 pixels to be my section top margin now the main menu itself highlight the nav menu widget select the style tab X color will be white for a normal state of the menu item background color will be transparent typography I'm gonna pick I'm gonna pick Joseph incense which is very nice and crisp font family I just love it size will be 15 pixels and the transform is going to be uppercase now select our because we want to main we want the menu item to change color when mouse over it of course I'm gonna choose that purple color from the logo I just have to find out its hexadecimal code so I'm gonna need my system application okay in based background color background color will be transparent I don't want any background color alright I could also define a different color for an active state of my menu items but I'm not going to do that and if I do and if I don't do that the active State inherits how are settings horizontal parent will be 0 I already set the padding of my pop-up which is enough in case you need to increase the vertical space or spacing between menu items you can use vertical padding slider but I'm just fine with a default and final divider you can add it if you want to but I don't think it's necessary I'll just leave everything as it is there's one important thing that I should that should be mentioned while editing the pop-up template and which might be confusing for some people because it was confusing for myself at the beginning okay so whenever you are about to edit something that relates to the pop-up itself be sure to click on the Settings icon it's a little cog here a cog icon on a functional menu bar as you can see okay it's here so once I'm I'm editing my pop-up you can see that the editor panel title that reads pop-up settings okay that's how you know how that that you are editing the pop-up itself and whenever you click on a section or the column or any other widgets inside the column you are back to normal so to speak because you are dealing with a page builder in widgets again now I could also make my off canvas menu more interesting as I said and fill it up with some other elements because y-you can actually use that pop up as a sidebar and maybe add the the contact info social angle ass whatever so I'm going to add the image widget and some text and maybe a title below the image just to demonstrate the point of what I'm talking about we can publish our pop up now so I'm gonna click the publish button where do you want to display your template we have to add condition of course and the condition will be entire side why because we are dealing dealing with a with the Sun with the main menu main menu of the side no need to do anything else here it's all good so instead of hitting that next button I'll just hit save and close if I hit the next button more setting screens will be open and which might seem confusing for someone so save and close it some sort of the shortcut so what's next we've got a pop-up ready that pop-up will actually be used as our off canvas menu and if you recall I said at the beginning of this tutorial I want to get rid of the main menu and actually replace it with a hamburger icon the icon hamburger icon should be a button that triggers the appearance of the off canvas menu our man you should slide in from the right-hand side of the screen and then or slide out once closed so let's add the header template that houses the main man from the edit with elemental admin bar link I can select to end my page header like that first thing that I'm going to do here is to remove main menu so highlight the menu right mouse click and simply delete next I'll drag and drop button widget to the same location I'll delete the text I'll delete X because I want to keep only the icon another link we have to stop here for a while because this is where I am about to create so called action trigger for my off canvas menu or a pop-up so I'm going to click on that dynamic link above and find the pop-up on a list of actions here it is and I'm going to select it now you can see that my link input field is been populated with a value pop-up and there's a little range icon next to it so click that little range item action should be open pop-up and now I only need to tell Elementor which pop-up to open because theoretically there could be thousands of popups okay so I'll type in the name of my pop-up which is off canvas menu that's why I told you to memorize title of your pop-up all right and there it is this is how the pop-up trigger is created next alignment button should be aligned to the right hand side and now finally going to select the icon or icon I don't know why this icon is called hamburger maybe the more appropriate term would be something like Himba hamburger icon oh that was stupid anyhow now I just need to style up my hamburger icon a little bit so I'll open the style tab typography even though I don't have any text on my button this is actually where I can control the size of my bar icon I want to make it a little bit bigger and I think that something like 30 pixels will be okay maybe it looks too big at this point but once I remove the padding will be just fine I guess X shadow I don't need any next color for both and for both normal and horror state it'll be black and then slightly transparent when mouse over it and the background color will be fully transparent okay or e-type border-radius and Bach shadow box shadow are not needed so I'll simply leave as is barring default button pairing is kind of too much as I said so I'll enter five final five pixels of padding to all four sides that's gonna be enough all right let's see what we've got let's check whether everything is working fine I'll click the hamburger icon hamburger button my off canvas menu should slide in just like that okay there it is now update and let's get back to the front end okay refresh the browser all right looks good however I'm noticing three things at first sight first of all I would love to move the close button a few pixels downward as you can see it's partially hidden by the admin bar even though it will be fine when the bar is gone I just want to remove and I just want to move with a little bit downward second thing the pop-up itself is kind of sluggish I want to speed it up a bit it's too slow and finally there's a strange background to the menu item in focus I don't know whether you can see it or not it's quite subdued but if I open and close the submenu is there it's gonna be there all right as I recall this is one of the elementary box no big deal but it's still not resolved if they're for a long time as I can tell anyway let's go back to our pop-up template to our off canvas menu to handle these so first thing click on the Settings icon that little cog style tab and then expand close buttons panel to fix the close button position vertical position I think that 30 to 35 35 pixels will be fine okay now select settings tab and decreased animation duration 2.25 seconds and finally I need to use custom CSS panel this time to handle the ghost background of the menu item in focus to fix that box so select Advanced tab and expand custom CSS panel so here's what fixes the problem selector menu item greater than a semicolon hey Cullen focus open closed curly brackets the background is going to be none okay selectors here is the reference to my nav menu widget menu item is how I refer to any menu item and greater than a column focus is selector that is used to select or trigger the element that is in focus if you wonder about greater than symbol it's here to target element which is direct child of a particular element in this case it's our menu item okay let's update and see whether everything is fine now back to front and refresh browser yeah it's all good exactly as I wanted to and there it is you're off canvas menu made by elementor's pop-up so what's the advantage of that kind of a menu well I guess you don't need to worry about responsiveness and the break points at which the standard horizontal menu turns into the hamburger menu for instance then if you prefer cleaner look and minimalism with regards to design of course page header might become very tidy and clean without any text how about the drawbacks well I'm not sure I can mention any particular drawback at this point but I guess that the off canvas menu is the mayor of personal choice it's quite intuitive and speaking of usability I'm seeing it quite often lately and I cannot believe its popularity is yet to come so if you like this tutorial give me a thumbs up comment share spread the word anything you do will be fine and if you do so I'll make more elemental tips and tricks videos stay tuned and thanks for the support from the bottom of my heart

Channel: Oooh Boi

Views: 94,368

Keywords: off-canvas menu, elementor off-canvas menu, elementor popup, popup menu, slide-in menu elementor, menu in elementor, elementor tutorials, elementor tips, elementor tricks, elementor how to, elementor design tips, design tricks, elementor

Id: suuo145v_E8

Length: 19min 25sec (1165 seconds)

Published: Tue Oct 15 2019