How to Add A Sidebar Menu with Elementor - 2020

hello everyone today I will show you how to make this sticky vertical menu using element red an elemental crow so when we will scroll the page this vertical menu will be sticky first start I've installed a new wordpress on the slash time of holder and I am using this element or an elemental pro plugin only on the classic editor for the theme I'm using the Ventura hello thing but this will work anything of your choice and I have already created this menu it's some hash things first of all we need to add a page go into pages add new just give it your name and call it home and select the template as default template let's publish this out the viewer page at the moment this will look like this because we don't have any header or it's done menu at the moment so let's make a vertical menu so we need to go into templates and head you for the type of angular unit is like single and for the post type will be page will be single page let's give it a name neither some prevails so first of all for the left program click on settings the patient's left a page layout volumetric canvas how I read select the structure this will be the smoke another one I will make it full dirt whole section the first column I give a 12 percentage of width and for the whole section for the column where I was like no babe height will be treat the screen as you can see in the sampler in this menu is fit to screen now we need to stretch these columns as well so we can go into column position which is it at the moment make a stretch for this first column I will add a background color you can add any color of your choice now I will add an image or logo I have already uploaded this logo I will make it full and under style I made it a percentage of 65% yes and for the column I'm going to advance I read a padding in percentage of 10% 10% left right top and Goten now I will select the nav menu widget where the menu underneath the logo for this drag-and-drop it will select the menu which I have already created this one so first of all let's give it to color white alignment will be centered and you can choose any animation on however like at the moment it's underlined when choose double line or frame as well I will choose none I'm going to type text color is white it is okay for the weight I will add 400 we transform it to uppercase there's okay now and we need to add some work already thing quantify will be okay yes all right the autumn I will add some social media links so just search social you can also add the copyrights now I will make it circle and for the size that's 15 yes now I will go back into the column settings or until it's all them and the layout we need to select the vertical align to space between so now the logo is at the top the menu is in the middle the social icons at the bottom now what this column we need to add this post content widget this is very important because if we don't add this post content widget we will not be able to have the content in to our pages so we need to select this post content widget for this column now for tablet and mobile devices I will make a separate menu when you the same color stop it make it full it add this color and background how we will switch to tablet mode copy the logo taste it find it the left or the width we like 50% yes okay also I will copy this menu click paste here and further along the vertical alignment so it's back to Omega for both columns and put this toggle button I will align these two right and we need to make it full of it cause if you don't make it forward when we will click on the toggle button it will expand this other column as well so we don't want this so we will make it fit now their style is troubled with a little bit on your style follow button when the color I will beautify it color yeah there's okay now now they will switch to a while for the first column I have a vivid 60% width and for the second column I've got 40% of it no it's okay now so let's switch back to desktop and this section we created from a violent Ablett we need to hide this for desktop so we will go into advanced and responsive hide on desktop and for this section we only need to hide this column for mobile and tablet devices we don't need to add the second column because we have the post content visit in it which will show the each content so I will click on this column I will go into advanced and responsive I will hire this tablet and mobile also need to speed this tablet and this column we need to make it under person width because we want to make the other column hundred percent as well same for mobile how will just publish this click on publish by default it will select pages and all finish we need to select this just save and close now if we go back to the home page we created if we refresh this page we will have this vertical menu for our page so let's add some content in this page I will edit it with a Dementor for this tutorial I will import a preview layout we will template through this one yeah let's insert this take few seconds let's check it out is a complete and producing portrait where do you see that this vertical menu is not sticky at the moment and we scroll the vertical menu is also scrolling so we need to make it sticky first of all just update this and to make this manual sticky we need to add a plug-in so I will go into plugins add new your search sticky men you need to install this plugin sticky menu or anything on scroll just install this plugin and activate this it will show under settings and stick him any or anything so cost of all in the template we were creating here it is so we need to add a class for this column so we will make this column sticky I will go into advance for this column I will add a class you can call it anything I'll call it call underscore sticky and just copy this class Stovall update this and copy this class go to the plugins under settings sticky menu or anything click on it and here you need to add the class this paste the class here and daughter at the beginning the or and that then class name no need to add anything else to save the settings now if we refresh our page and if they scroll see our menu is sticky now but there is a little bit of white space at the bottom so we need to remove it now we need to make it polite so we just need to add one line of CSS code so we'll go back into the template we were creating and here just copy a class in this column and hundred custom CSS add this class and add the height of 100 th for this under vertical height so just update this now if we refresh our page now you can see our vertical menu has wide and it is fit to screen and sticky elbow so this is a little bit below the screen this is actually we are viewing it in the editor mode so if we go into the edit profile and if I hunch on this show toolbar when viewing the site and save the setting now if we refresh now you can see our vertical menu is fit to screen and when we scroll the menu is sticky so this is how you create a vertical menu in a WordPress using an event or an elemental CRO so I hope you will like this video and if this video helps you in any way just give it a thumbs up and subscribe to my channel this is my first youtube video and I hope I will be making more videos on WordPress and on Elementor so yeah see you in the next video

Channel: WordPress Guru

Views: 62,151

Keywords: elementor, elementor pro, wordpress, vertical menu, sticky menu, elementor website, sticky sidebar, sidebar menu

Id: uTg8kue0oig

Length: 15min 32sec (932 seconds)

Published: Fri May 24 2019