This article relates to the editor for classic web creation | Wix Editor

Wix Editor: Creating a Full Screen Pop-Up Menu

Use the lightbox element to create a stunning full screen pop-up menu! When visitors click the "Menu" button, it opens on top of your site's content, just like in the example below:

Step 1 | Add a Lightbox to Your Site

Start by adding any lightbox from the Add panel to your site. You will re-design it later on. 

To add a lightbox:

  1. Click Add on the left side of the Editor.
  2. Click Interactive.
  3. Select a lightbox.

Step 2 | Set Up Your Lightbox Menu

After adding a lightbox, set it up so that it isn't automatically displayed every time visitors access your site. Then, design the lightbox to your liking and add a vertical menu. 

To set up the lightbox:

  1. Click the lightbox and click the Settings icon .
    1. Rename your lightbox to something recognizable such as "full page 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.
  4. When ready, click Exit Mode at the top.
Tip:
You can also customize the background of the lightbox and the background overlay to match your site. Make the backgrounds slightly transparent for a cool effect!

Step 3 | Add a Button to Open the Menu

Now that your lightbox and menu are ready, add the button that visitors click to access the menu. Then, link the button to the lightbox. 

To add a button:

  1. Click Add on the left side of the Editor.
  2. Click Decorative.
  3. Click More Basic Shapes.
  4. Type "menu" in the search bar and press Enter.
  5. Select a design and click Add to Page.
    Tip: Place the menu button in a prominent location on your site like the header.
  6. (Optional) Click the Design icon to design your menu button.
  7. Click the menu button and click the Link icon .
  8. Select Lightbox on the left.
  9. Choose your lightbox from the drop-down menu and click Done.
Tips:
  • 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.
  • You can also design your own menu button. It can be a text button, icon button or a different shape; it's up to you! See some examples below:

Step 4 | Hide the Button From Your Mobile Site

Hide the button you've just created from your mobile site, which already has a full screen menu preset. 

To hide the button:


  1. Access your mobile Editor.
  2. Click the menu button that is linked to your lightbox and click the Hide icon

Did this help?

|
Hire a Wix Partner
Get help with your website's design, marketing and small tasks from a professional freelancer or agency.
Start Now