# Wix Editor: Creating a Full Screen Popup Menu Source: https://support.wix.com/en/article/wix-editor-creating-a-full-screen-pop-up-menu (updated 2026-03-26) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt 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.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/09/19/76693f1a-456f-4460-845b-ac1d2dd49ffe.gif) --- ## Step 1 | Add a popup to your 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: 1. [Go to your editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Click **Add Elements** ![](https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png) on the left side of the editor. 3. Click **Interactive**. 4. Select a popup to add it to your site. ![add elements panel showing popup options in wix editor,](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/48407cbe-c202-4f42-a85a-d02d4c9ebcfd/8895a993-6a0a-480d-b7fa-793bd04fc25e.png) --- ## Step 2 | Set up your popup menu 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: 1. Click the popup in your editor. 2. Click the **Settings** icon ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/25/1a09cdbb-c89a-465d-b49f-480f4f8584c1.png). 3. Rename your popup to something recognizable such as "Menu". 4. Select **No** under **Automatically display popup on pages**. ![popup settings panel, no selected under automatically display popup on pages.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/9aa84f87-2a38-4577-b37c-3aaf17b6010c/52d35955-be11-43db-8aff-b9d914eca319.png) 1. Delete all of the elements inside the popup. Do not delete the 'X' icon. 2. [Add a vertical menu](https://support.wix.com/en/article/wix-editor-adding-a-site-menu) to the popup. 3. [Design your menu.](https://support.wix.com/en/article/wix-editor-customizing-your-horizontal-menu-design) We recommend that your menu fonts are large and centered. 4. When ready, click **Exit Mode** at the top. ![exit popup mode popup in wix editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/d1cc4215-a59c-4128-a52c-7c94d45ba93b/f163aaec-eeb7-4bb6-ba54-1fef4e714e23.png) > **Tip:** You can also [customize the background of the popup](https://support.wix.com/en/article/wix-editor-customizing-your-lightbox#setting-the-lightbox-background) and the [background overlay](https://support.wix.com/en/article/wix-editor-customizing-your-lightbox#changing-the-lightbox-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 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: 1. Click **Add Elements** ![](https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png) on the left side of the editor. 2. Select **Decorative**. 3. Select **Basic Shapes**. 4. Click **More Basic Shapes**. ![A screenshot of selecting More Basic Shapes in the Wix Editor](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2023/03/31/d6bd0720-edca-4214-8923-48d07ace90de/67e43b81-931f-412a-a1dd-2fe524e1620a.jpg) 1. Type "menu" in the search bar and press Enter. 2. Select a menu button design and click **Add to Page**. 3. Click the menu button in your editor. 4. (Optional) Click the **Design** icon ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/09/19/8c184bd2-9498-413c-b490-73c2f9829816.png) to design your menu button. 5. Click the **Link** icon ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/25/f89dced2-4944-4283-90df-e4ffd00c23d5.png). 6. Select **Popup** on the left. 7. Choose your popup from the drop-down menu. 8. 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](https://support.wix.com/en/article/wix-editor-pinning-elements-to-the-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](https://support.wix.com/en/article/wix-editor-showing-an-element-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:![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/25/c4caa6b0-307c-448e-9c97-684e3c86b6e0.png) --- ## 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](https://support.wix.com/en/article/wix-editor-getting-started-with-the-mobile-editor). 2. Click the menu button that is linked to your popup. 3. Click the **Hide** icon ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/25/a36fcc84-b60d-494e-9858-8872d78ad190.png). ![A screenshot of the hide element option for a lightbox in the mobile editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/3110820f-a0ac-4cb3-a43a-17e08abb7c0b/ce4933b7-a2cd-43ff-b586-8777535011cd.png)