How to Create Vertical Menus in WIX | Wix Fix

A vertical menu can really enhance the functionality and appearance of your website. In WIX, you might not think that it's possible to create a vertical menu, but it is! In this tutorial, we'll be walking you through how to make a menu just like the one seen on the left-hand side of this website - perfect for those participating in our Monthly NoCode Design Challenges with Prizes! So if you want to learn more about creating awesome designs and further your career with a little help from our mentors at Live Learning, keep reading.

Step 1: Setting Up a Box

To get started with creating a vertical menu in WIX, open the WIX editor and follow the instructions below:

1. Click on the "Add" button.

2. Select "Box" from the dropdown menu.

3. Drag out a box onto your webpage.

Once the box is on your webpage, adjust the width to 100 and the height to about 1500. This will give you plenty of space to work with when creating your vertical menu. You can then align the box to the top left corner of your webpage using the align tool.

Step 2: Adding Lines and a Logo to the Box

Now it's time to add some lines and a logo to your box. Having decorative lines and a logo in your menu will help your website stand out.

1. Click on the "Add" button again.

2. Select "Decorative" and then "More Basic Shapes."

3. Search for "lines" and choose the line design that you like best.

Once you've selected a line, change the color to a lighter shade (such as white) so that it stands out against the dark background of the box. Shrink the line down using the resizing handles, then drag it into the box. When you see the box highlight, it indicates that you can attach the line to the box.

Attach the line and move it up slightly to create some space between the line and the top of the box. Then, repeat the process for other line designs if you want to have multiple lines in your menu.

Next, you'll want to add your logo to the box. For this tutorial, we'll use the logo that came with the website template. Simply click and drag the logo into the box, making sure that it is properly attached to the box before releasing it. Change the color of the logo to white (or any color that suits your design) to make it stand out against the dark background.

Step 3: Create Menu Items

With your box set up, it's now time to add the menu items.

1. Click on the "Add" button.

2. Select "Text" and then choose a text style that you like.

3. Update the text with your desired menu item (e.g., "Home") and change the text color to white (or any other color that stands out against the box background).

Now, you can drag the text into the box below the logo and line(s), making sure it's properly attached to the box. Once it's in place, duplicate the text element to create more menu items. Adjust the spacing between the menu items to your preference.

Step 4: Adding Links to Menu Items

To make your menu functional, you need to add links to the menu items. To do this:

1. Click on the text element you want to add a link to.

2. Select the "Edit Text" option that appears.

3. Click on the chain link icon to add a link.

4. Choose the destination (e.g., a page on your site, an external site, an email address, etc.) and click "Done."

Repeat this process for each of your menu items. Once all links have been added, preview your site to ensure that the vertical menu is working as expected.

Final Thoughts

And there you have it! A functional, eye-catching vertical menu for your WIX site. Vertical menus are an excellent way to showcase your content while keeping your website looking professional and clean. Don't forget to join us at Live Learning for more design inspiration and monthly NoCode Design Challenges with prizes! Our mentors are always here to help you elevate your design skills and advance your career.