How To Create Vertical Menus In WIX | Wix Fix

hey guys welcome back to wix fix today i’m going to be teaching you how to create a vertical menu just like you see here on the left hand side of this website right here you may not think you can actually do something like this in wix but you can and right now i’m going to show you how so as you can see right here this is the header this is what you would normally see on your website but today we’re going to be switching it over to a vertical
menu so the first step is we’re going to go to add we’re going to go to box and we’re just going to drag out a box we’re going to make the width over here 100 and then we’re going to make the height about 1500 then we’re going to click this align tool and align it to the top now let’s go ahead and add some lines so we’re going to go to decorative more basic shapes i want to search for lines choose whichever one you want to add we’re going to
change the color of it to something lighter for this example i want to shrink it down now we’re going to drag it into the box you’re going to see the box highlight showing that we’re going to attach it to the box and then we’re going to move it up a little bit there we go and then for this example we’re just going to use the logo that the template has so we’re just going to drag this down into the box we’re going to wait for it to highlight and
say attach the box we’re going to release and just like the line icon up here we’re going to change the color to white next we’re going to click the box element we’re going to right click and say pin to screen we’re going to set the position to the top left and we’re going to remove the horizontal and vertical offset all right now if we preview the site you will see that the left bar has the logo and the icon now let’s get it to function so when
the user clicks this little icon up here we want a menu to pop up so we’re gonna go to add we’re gonna go to interactive we’re gonna click subscribe and we’re just gonna drag this out okay the first thing we need to do is press layouts we’re going to set it to the left hand side next we’re going to set triggers we’re going to say automatically display to no and we’re going to name this menu okay next we’re going to go ahead and delete everything
that’s on the page currently we’re going to click the background of it and then press design color and we’ll do something like the black wix automatically puts a border on this little x button so we’re going to go ahead and remove that border by pressing customize design border and we’re going to remove the border next we’re also going to move this icon to the left hand side to be in the general area that our icon was in the beginning next we’re
going to press add go down to menu i’m going to scroll down to vertical menus and we’re going to drag out a menu we’re going to drag this over the light box that we just created and then press design customize design text we’re going to have the color be white hover we’re going to change the change it to a light gray and then clicked we’re going to have it be a darker of a gray okay and then we’re also going to change the text to be the same text
on our current page so this one is montserrat okay so when i go down back to our menu and change this to montserrat so we’re going to do design customize design text and we’re going to type in monster i’m gonna do monster at bold so as you can see we have a menu up here and then we also have some social icons so what we’re gonna do is add the social icons down here so we’ll go down to add social and we’ll bring out these icons okay we’re going to
change the layout and lower the icon size to about 24. okay now we’re going to press set social links we are going to remove all of them we’re going to press add icons and as we can see here in the top right they use facebook twitter and youtube so we’re gonna use facebook we’re gonna grab the white version okay now we’re gonna add twitter and we’re gonna add youtube next we can go ahead and reorder them then if we click the icon and press add a
link here is where you can post your your link to your facebook page your twitter page or your youtube so now we’re going to move this over to where it looks like it’s all aligned together let’s go ahead and press this little hide controls thing right here we’ll click the icon that we just created we’ll link it to a light box and the only light box that we have created is menu so we’ll press done okay so now that we press preview now we can
actually see the site so we’ll press this little icon right here and we’re going to see our menu pops up however we just saw that the menu comes out from the right side we don’t want that so let’s go ahead and go back to the editor we’ll go to menu we’ll click the menu press animated we’ll do customize and we’ll do from the left and then we can actually go ahead and delete the stuff on the top navigation bar because we no longer need it since
it’s already in our menu that we created and then if you wanted to you could actually drag these out delete the header so now that we have a header that is clear we can actually go over to menu and pages we’ll go to this three little dots do settings layouts and no header and footer next we can just bring these up so it’s in alignment with our little icon right there we’ll press preview and we’ll press the little icon just to make sure it works
and great it is working just as we want and that’s basically how you create a side menu so if we go over to the about page you’re going to see that the vertical menu is not there at all so if we go back to the home page and we click the box with the vertical menu in it we can right click it press save my design we’ll call this nav bar now if we go back to the about page we can press add we’ll go down to my designs at the bottom and we’ll click
nav bar and your menu will automatically pop up for you now that you know how to set up a vertical menu i do want to show you a little bit of a pro tip if we add a strip you’re going to see the strip still spans the full width of the site even behind the vertical menu so if you put anything in these two lines right here it’s going to look centered however with this vertical menu it’s still going to seem a little off-center because this is taking
up some space so if you want you can press layouts add column then you can press the layout button right here and you can shrink this one down to five there we go so now you can see that the first strip takes up the same width as our menu and now the second strip is exactly the width of our that our content should be to have it actually look centered and clean on the website and that basically wraps it up for the video today i hope you guys did
enjoy if you learned something please press that subscribe button because i do have more content coming very soon for y’all and please press that like button because it helps out the channel thank you guys so much and i’ll see y’all in the next one you