Σ 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 🙂

hello girls and boys welcome to elemental tips and tricks video clips while I was working on my previous video tutorial about the off canvas menu I got an idea on how to switch from horizontal version of the menu to the off canvas menu that can be used for mobile devices or even tablets it doesn't really matter the point is that you don't necessarily need to use elementors built-in Mobile drop down menu but rather create your own before you continue to watch this video I encourage you to watch off canvas menu video tutorial as well why because you're going to learn how to actually create that off canvas menu I'm not going to repeat myself and do the same thing in this tutorial I'm just going to reuse the menu that I have created before the link to off canvas menu video tutorial can be found in the description below so the tank or the task is pretty much obvious how to create the custom mobile menu and avoid using default one that doesn't work that great or otherwise let's say that the horizontal menu is preferred menu version for all the desktop machines while all other devices such as tablets and mobiles should access the off canvas version of the main menu okay let's open the header template that houses my main menu first highlight the nav manual widget be sure the content tab is opened layout is going to be horizontal airline to the right hand side pointer submenu indicator basically everything here remains as is with one little exception and the exception is the breakpoint option which needs to be set to none it's simply because I don't want my horizontal menu turn into the mobile drop-down at the given breakpoint I will rather hide it completely and display my own version of the mobile menu but let me first demonstrate how that mobile drop-down looks like and what options I have by the default I'm going to set a breakpoint back to the tablet for a moment so responsive mode select tablet just to make my mobile menu visible okay so this is how it actually looks like what I can do now is to let it sit inside the header and if I do that the header will grow or become as tall as the menu itself when speaking of the width the menu cannot be wider than the parent column I also have another option and which is to make my mobile drop-down menu full width by doing so the menu becomes absolutely positioned and the header height doesn't change anymore so these two are the only possible mobile drop-down menu versions in Elementor default ones at least to the date of this video tutorial release however as I said at the beginning it's also possible to build your own mobile version of the menu very easy first let's disable any break point for for real now and do the things new way okay set breakpoints option to none and now I'll open the widgets library next I'll drag and drop the button widget right below the existing horizontal menu I'll delete the text because I need only the icon let's create so-called action trigger for my off canvas menu now or a pop up I'm going to click on that dynamic link above and find the pop-up on the list of actions you can see that my link input field says pop-up and there's a little range I can next to it so I'm going to click that little orange icon or anywhere inside the input field action should be open pop-up and I have to tell Elementor which pop-up to actually open I'll just start typing the name of my pop-up which is off canvas menu Elementor loads all the matching pop-up titles and I just have to pick the one that I'm about to trigger and that's it that's how the pop-up trigger is created next alignment buttons should be aligned to the right hand side and now I'm going to select the hamburger icon this time literally a hamburger icon okay so I'm gonna type in hamburger and here it is alright icon spacing should be zero now I need to style up my hamburger icon a little bit so I'll open this time stamp typography even though I don't have any text on my button this is actually how I can control the size of the icon so 30 pixels will be fine text shadow I don't need any text color for both normal and hover state okay it'll be black and then slightly transparent when mouse over it and the background color will be fully transparent for both normal and horror state border type border radius and box shadow are not needed and I'll simply leave as is finally padding let's decrease padding to 5 pixels okay now that I have all the elements needed let's get to the very point and the very point is how to hide my horizontal menu and make the hamburger I can show up instead at a certain break point of course in case you didn't know there's a panel in elementary aimed responsive which can be found under Advanced tab so I'm going to highlight the menu first open advanced tab and expand responsive panel this is where I can switch or better say control the visibility of any section column or widget per device because I want to keep the horizontal menu visible on desktop machines only I'll hide it for all tablets and mobiles likewise I'm going to highlight the hamburger button open Advanced tab expand responsive panel and hide it for all the desktop machines ok let's check all out remember that responsive visibility will take effect only on preview or live page and not while editing in Elementor so I'll have to hide the main elementor's panel okay and the menu is there as you can see now switch to tablet okay a horizontal menu is gone or hamburger button took the place which is fine now the mobile yeah it's all right however there's one little thing left to be done let me show you first what's going on with our off canvas menu when browser window is resized manually I'll have to go to the front end to demonstrate the problem so if I resize the window for the first time my horizontal menu disappears at the tablet breakpoint which is fine but if I now click the hamburger icon and open the off canvas menu then resize the window back to the desktop size my off canvas menu doesn't disappear automatically and the little thing that's left to be done is to hide it off canvas menu for all the desktop machines how do I do that let's open our popup template first I have to go to the WordPress admin first then templates pop-ups and then select our off canvas menu pop-up for edit pop-up template doesn't have responsive panel under Advanced tab so the only way to handle the problem is as you probably guess custom CSS panel and of course a little bit of CSS code nothing too much just one single rule between two slices of bread so to speak before I open custom CSS panel I'm going to give a custom class name to my pop-pop my off canvas menu and it's going to be off canvas menu why did I do that because this is how I'm going to refer to my pop-pop when adding CSS rules that's gonna be my popup identifier so to speak alright now expand custom CSS panel finally and if you remember we need to make the off canvas menu invisible whenever the horizontal menu is visible because we don't need both menus at the same time it's confusing and it doesn't look right because of the fact that this is some sort of the clause or a condition we must use media query more precisely media query that triggers the desktop screen resolution and which is by the default in elementary ten twenty five pixels and above of course what is media query media query is some sort of the clause according to which browser knows how to render certain class or element with a class at a certain screen resolution so here is what we need in this case this is how my media query looks like I'm going to type in add media open close a pair of normal brackets followed by the pair of curly brackets alright then inside the pair of normal brackets I'm going to add min weight column ten twenty five pixels all right and now between the curly brackets I'm going to type in the class name of my off canvas menu or a pop-up so off canvas menu then open close a pair of curly brackets again and I'm gonna add display column none and then important rule this is actually how I can overrule elementor's default display rule for the pop-up without important rule it wouldn't work basically the above chunk of code says that whenever the screen resolution is 1025 pixels or above do not display our off canvas menu as simple as that however as you can see our pop-up or the off canvas menu is not visible anymore in Elementor and it's because of the CSS rule that I just have added that's kind of stupid because I'm not because I'm no longer able to edit my menu unless I switch responsive mode to either a tablet or mobile so in order to fix that problem I'll add or prepend another class to off canvas menu existing class and that very class will tell Elementor to actually apply my CSS rule only if Elementor editor is not active or better say hi the off canvas menu only if page is viewed in front-end or outside the editor and here's what I'm going to add body column not open close a pair of nono brackets and inside I'm going to add Elementor editor active just for your information whenever you are in edit mode whenever you edit certain page or template in Elementor the elementary editor active class is added to the document body element what I've wrote here actually says whenever body element does not have a class elementary editor active height or don't display my off canvas menu element because of the fact that we are in edit mode and the class elementary editor active is assigned to the body element right now the browser simply ignores my CSS rule I hope it makes sense it's maybe a little bit mind-boggling but that just how things work and now I have to update my pop-up okay so update and let's get back to the front-end refresh browsers window and see whether everything works all right now I'm gonna scale browser window to test functionality okay as you can see the off canvas menu disappears whenever the desktop breakpoint is reached even though I didn't shut it down which is perfectly fine so yeah it looks perfect hopefully this tutorial will help you sharpen your Elementor skills or maybe you get an idea how to make your own alternative version of responsive menu it doesn't necessarily need to be an off canvas thing a simple top up with some nice entrance animation might also work it's up to you anyway if you liked this tutorial give me a thumb 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 .

Video Discription

How to replace a regular/horizontal menu with an off-canvas menu for Tablets or Mobile devices?
Easy to be done in Elementor PRO! If you don’t like Elementor’s default Mobile Dropdown menu, create/design your own and do the things your way.
In this tutorial, I’ll guide you step by step on how to make a better version of a Mobile menu. Learn something new and sharpen your Elementor skills without spending a dime.

***** Off-canvas Menu video tutorial *****

The CSS code used in this video tutorial:

@media (min-width: 1025px) {
body:not(.elementor-editor-active) .off-canvas-menu {
display: none !important;
}
}

 

Leave a Reply