Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

in this video we're going to show you how to make an off-campus menu using the built in pop-up feature from elementary Pro let's show you an example of what one would look like so let's pretend this is your header and we have these bars over here and then we have this menu popping up from the left-hand side so that's basically what the off-campus menu will look like so let's go ahead and just dive right into it go to templates pop-ups add new we're going to call this off canvas create template once we are on the section we can use one of these templates that Elementor has kindly given us and we can modify it a little bit as you can see they have these side ones over here is the ones we're going to want to look at for something along those lines or something like this one but basically let's go ahead and build it ourselves let's adjust our layout so we want the height to be fit to screen we want it as tall as possible the content position we're going to leave at the top if we choose the center it'll be there choose bottom it'll be down at the bottom the position we're gonna make this to the right and then vertical we're going to leave this it doesn't really matter for these because it's a full height width for the off-campus menu the overlay we can leave the over light one or we can turn it off whichever you prefer sometimes a lot of people leave it on with the minimal overlay but a lot of people sometimes will leave it off just because they don't want to obstruct the rest of the content we have the close button which if you're going to be using an on off canvas and it's going to be hiding the button that you're going to be using to toggle it on and off that you're most likely we're going to want to have a close button under the general settings we have these the preview settings we won't need any of this let's go to style so we have the background type right here what we want to do is you can set this to be any color you want let's choose black you have image options border types things of that nature go to the close button we can choose the vertical position in a horizontal position but for right now we're just going to change the color of it and we're going to increase the size tremendously all right underneath the sides like so we've already got all of that taken care of so right now we're going to adjust the width of it and this width is going to be determined on how much content you want if you want it to be a content heavy you might want to have it a little bit wider or if you want to have just a minimum menu in your logo you can change it to a little bit of a smaller off canvas width let's go ahead and add some items so I want to do I want to do an image and we could pick an image up here if we want to have any of these we can choose this one right here or one of these let's go ahead and choose one of these let's do this one and I'm going to make the background of this white just so we can stand out some change the width of this and then let's go ahead and add some navigation we're gonna search for nav and click and drag the nav over here make this a vertical layout we're going to leave it there or we can have it centered like such we can change the pointer so when we hover over top of this we have the underlined we want to get rid of that and then we have just that right there off of the mobile drop-down we don't want to have the mobile so we want to toggle the toggle button off because we don't need that go over to the style and we can adjust the menu accordingly however we need it to be we have all of those different options here shrink that down some taste textcolor make that white change the font to a little bit of us something more sophisticated to match the website play fair one of my favorite wants to go with from there we want to maybe show people our social icons so we'll go there we will do the style make that custom make the secondary black make the primary white maybe have the size a little bit down and then we have all of those different options there we can do left center or right aligned will do left will line it up with this menu we'll go to the style for the menu the horizontal padding will make that zero so it goes over there to the left and then we can have our sections here for when we hover over top of those so we have this off campus right here but now we notice that our close button is hidden so we need to go back to our settings for the pop-up go to the close button under style and we're going to make this black again just because it all depends what you have at the top and we have that large white image at the top so we need to go ahead and do that we're gonna make this a little bit smaller there we're gonna add a little bit of padding to the entire section itself and of course we have to go back and change our pop-up tag our clothes died again and we've got that so we have our nice off canvas menu here and what we can do now is we just hit publish we don't need to worry about any of these settings right here so just click Save and close go back to the dashboard we're gonna view our homepage we're gonna edit the header that we built with Elementor and once we do that we have the menu item over here that's going to trigger it so once we we click this and we want to edit this we have this link now we want to click dynam go to the pop-up and we're going to click open pop-up now you can do toc will pop-up won't really matter so I'm just going to do that and then we're gonna type in off canvas and it's going to appear there let's update go to our dashboard and then we'll visit the page and once we click we have this right here now it's a little bit of a harsh entrance so we want to get rid of that you know harsh pop-up let's edit the off campus pop-up once more and then we will do the entrance animation right here now we want this to fade in maybe left or fade in right let's do fading right so we do something along those lines so it's a little bit less harsh and then once we have that it'll be a nice smooth transition when we're doing our pop-up as we're a home page we have the View menu and we have that option right there alright now we see we still have our overlay so let's go ahead and take that off as well go up to our style we have our overlay turned on we have those options if we want to turn date the overlay and bring that down to nothing save and close edit to the dashboard homepage view we have our menu right there let's see what this looks like on a regular site when you're not logged in so it doesn't have that admin bar there we go there is our office off campus menu we could change the animations the animation speed as well so if we want it to be a little bit of a quicker pop in then how slow it is now we'll go back to edit in it and we have the adjustment right here for the animation duration let's just make this half a second save and close go back here and we have a much quicker pop in and then of course you have all of your menu items here we have our social icons here and then of course our logo you more than welcome to put all your contact information here put them put a map there the sky's the limit on what you can put in there because whatever elements you have on your element or it's what you can put in there so we have that option to do all of this and adjust accordingly right there and then maybe maybe a contact us button down there if you don't have one up here make it like a wide full width button over there and then hit save and close open this up and then we have our menu right there and it pops up right there I hope you guys enjoyed this video let me know if you have any questions in the comments below and we will see you next time .

Video Discription

Off-canvas menus are a great way to style your header and bring a more classic appearance to your website. Learn how to build one now!

Grab Elementor Pro:

 

InterServer Web Hosting and VPS

Leave a Reply