How to Create a Side Menu in Wix (2022) | Wix Create Side Menu

Hey there, fellow web enthusiasts! 👋 If you're here, it means you're ready to spice up your Wix website with a slick side menu or sidebar. Whether you're building a portfolio, online store, or any type of site, having a well-designed, functional side menu can enhance user experience and improve site navigation. In today's blog post, we'll guide you through the process step-by-step to integrate this cool feature seamlessly. So, without further distraction, let’s dive right into it!

Step 1: Get Into the Wix Editor

First things first—make sure you're using the right Wix editor. There are two main options: the Wix Editor and the Wix ADI (Artificial Design Intelligence) Editor. For this tutorial, ensure you’re working in the Wix Editor because it's where the magic is going to happen. If you’re in the ADI Editor, switch over to the regular editor to follow along.

Step 2: Adding a Lightbox

Once inside the Wix Editor, start by heading over to the Add button located on the left side of your screen. Here, navigate to Interactive and then Lightboxes. You’re looking for a lightbox that already has a side-friendly layout, which makes our job much easier. These templates are your starting point.

For example, find a lightbox design that’s off to one side. Drag and drop this onto your page area. Boom! You’ve got yourself a base for your new side menu. 🎉

Step 3: Customize Your Side Menu

Now you’ve placed your lightbox, it’s time to refine it. Remove any elements you don’t need. You might see a subscribe form or other elements—feel free to adjust these to fit your needs.

1. Text Adjustments: You’ll see some default text. Click on it, and change it to something catchy like "Browse Our Site." Adjust the font size so it's not screaming for attention, and center it nicely.

2. Add the Menu: What’s a side menu without an actual menu, right? Go back to Add and this time, go to Menu and Anchor. Select a Vertical Menu that matches your site’s theme and drop it into your lightbox. Feel free to tweak its size and final positioning until you’re happy.

Step 4: Designing the Look

Here comes the fun part: making it look awesome. Click on Design and adjust the color theme or style to something that vibes with your site. Click Customize Design to make shapes more defined or align colors across your site theme.

Pro Tip: Consider how overlays will affect readability. A subtle darkened overlay might help your side menu stand out without overpowering the main content.

Step 5: Integrating the Side Menu Button

Now, what you need is a button to trigger the side menu. Go back to Add, then to Decorative, and select Shapes. You might want to choose a simple icon like three horizontal lines (aka the hamburger icon), commonly used for menus. This is what users will click to reveal your side menu.

1. Adjust & Place: Resize this to suit your site’s aesthetic and place it at the top corner of your page, where it’ll be easily accessible.

2. Link It Up: With the shape selected, click on Link and connect it to the lightbox you’ve just created! By doing this, users can click the icon and—voila—the side menu pops out!

Step 6: Polish and Preview

With everything in place, give your design a once-over. Preview your site by clicking Preview in the Wix interface to see your new side menu in action! Check the movement, the look, and ensure everything functions as anticipated.

Once you're satisfied with your design, it’s always a good idea to save your work. While autosave is a feature, manually saving gives peace of mind knowing your progress is safe.

Final Thoughts

Creating a side menu in Wix is a straightforward project that can significantly enhance your website’s navigability and functionality. It makes your content more accessible especially on mobile devices or when you have a menu-heavy website.

Now that you’ve mastered this, why not explore further design opportunities? Here at NewForm, we’re all about helping creatives like you refine their skills and connect with industry experts. Join us for monthly design challenges that come with cash prizes, participate in our weekly workshops, and don’t miss our exclusive sessions with top web design pros. 🚀

Ready to up your design game and connect with a vibrant community? Head over to NewForm now and begin the next chapter in your creative journey!

That’s it for today’s post folks. Until next time—happy designing! 🌟