Help Center
    Help Center
  1. Creating your site
  2. Using the Wix Editor
  3. Managing pages and menus
  4. Menus
    5. Wix Editor: Creating a Sidebar Menu

Wix Editor: Creating a Sidebar Menu

4 min read
Use the lightbox element to create a stunning side bar menu!

To create a sidebar menu:

  1. Delete your existing menu from your site.
  2. Click Add Elements on the left side of the Editor.
  3. Click Interactive.
  4. Select a lightbox with a sidebar preset, such as the one pictured below:
  1. Click the lightbox and click the Settings icon .
    1. Rename your lightbox to something recognizable such as "side bar menu".
    2. Select No under Automatically display lightbox on pages.
  1. Delete all of the elements inside the lightbox. Do not delete the 'X' icon.
  2. Add a vertical menu to the lightbox.
  3. Design your menu. We recommend that your menu fonts are large and centered.
Tip:
Customize the background of the lightbox and the overlay to match your site. You can even make the backgrounds slightly transparent for a really cool effect.
  1. Click Menus & Pages on the left side of the Editor and select the page you would like to place the menu button on.
  2. Add a shape for the menu button:
    1. Click Add Elements on the left side of the Editor.
    2. Click Decorative.
    3. Click the Basic Shapes tab.
    4. Click More Basic Shapes.
    5. Type "menu" in the search bar and press Enter.
    6. Select a menu design and click Add to Page.
    7. Click the Design icon to design your menu button.
Tip:
You can also design your own menu button. It can be a text button, icon button or a different shape. See some examples below:
  1. Place the menu button in a prominent location on your site. This could be in the header, or you might want to use the Pin to Screen feature to pin it to the top of your site. If your menu button is not placed in the header, then make sure you set it to show on all pages.
  2. Click the menu button and click the Link icon . Select Lightbox, choose your lightbox from the drop-down menu and click Done.
  1. Preview your site to see your lightbox menu in action!
  2. Access your mobile Editor.
  3. Click the menu button that is linked to your lightbox and click the Hide icon . 
Important:
Make sure that your lightbox menu is not accessible from any buttons or links on your mobile site. You should use the regular mobile menu, which also has a sidebar preset.

Did this help?

|

Related Content

Wix Editor: Creating a Full Screen Pop-Up Menu

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched