Wix Editor: Creating a Full Screen Pop-Up Menu
4 min read
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 Elements panel to your site. You will re-design it later on.
To add a lightbox:
- Click Add Elements
on the left side of the Editor. - Select Interactive.
- Select a lightbox to add it to your site.
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:
- Click the lightbox in your Editor.
- Click the Settings icon
. - Rename your lightbox to something recognizable such as "Menu".
- Select No under Automatically display lightbox on pages.
- Delete all of the elements inside the lightbox. Do not delete the 'X' icon.
- Add a vertical menu to the lightbox.
- Design your menu. We recommend that your menu fonts are large and centered.
- 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:
- Click Add Elements
on the left side of the Editor. - Select Decorative.
- Select Basic Shapes.
- Click More Basic Shapes.
- Type "menu" in the search bar and press Enter.
- Select a menu button design and click Add to Page.
Tip: Place the menu button in a prominent location on your site like the header. - Select the menu button in your Editor.
- (Optional) Click the Design icon
to design your menu button. - Click the Link icon
. - Select Lightbox on the left.
- Choose your lightbox from the drop-down menu.
- 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:
- Access your mobile Editor.
- Click the menu button that is linked to your lightbox.
- Click the Hide icon
.
Did this help?
|