Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

In this article

Step 1 | Add a popup to your site
Step 2 | Set up your popup menu
Step 3 | Add a button to open the menu
Step 4 | Hide the button from your mobile site

Home

Creating your site

Using the Wix Editor

Managing pages and menus

Menus

Wix Editor: Creating a Full Screen Popup Menu

4 min

In this article

Step 1 | Add a popup to your site
Step 2 | Set up your popup menu
Step 3 | Add a button to open the menu
Step 4 | Hide the button from your mobile site

Use the popup element to create a stunning full screen popup menu. When visitors click the 'Menu' button, it opens on top of your site's content.

A GIF of clicking the Menu button that opens a full screen pop-up menu on a site.

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

To add a popup:

Go to your editor.
Click Add Elements on the left side of the editor.
Click Interactive.
Select a popup to add it to your site.

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

To set up the popup:

Click the popup in your editor.
Click the Settings icon .
Rename your popup to something recognizable such as "Menu".
Select No under Automatically display popup on pages.

Delete all of the elements inside the popup. Do not delete the 'X' icon.
Add a vertical menu to the popup.
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 popup and the background overlay to match your site. Make the backgrounds slightly transparent for a cool effect.

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

To add a button:

Click Add Elements on the left side of the editor.
Select Decorative.
Select Basic Shapes.
Click More Basic Shapes.

A screenshot of selecting More Basic Shapes in the Wix Editor

Type "menu" in the search bar and press Enter.
Select a menu button design and click Add to Page.
Click the menu button in your editor.
(Optional) Click the Design icon to design your menu button.
Click the Link icon .
Select Popup on the left.
Choose your popup 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: