How To Make A Wix Menu Using Lightboxes

Updated: Jul 10

Having a site menu is essential when designing a website. It’s pretty common knowledge that site menus are the core to navigating through different web pages. Unfortunately, adding a menu to your website can take up a lot of space. This brings us to the problem of today's article, how do we create a Wix menu without taking up too much digital real estate?


The solution to this problem is lightboxes. A lightbox, also known as a popup, is a small window that will appear and take up a portion of the screen. There are a lot of uses for lightboxes as well! In this article, we will be going over how to design a lightbox that will perform as your website’s menu. If you are interested in an example, check out our home page HERE.


Wix menu - lightbox - JJTPOSTS


1. Setting up a lightbox menu


The first step to creating your popup styled menu is to add a lightbox to your site. To add a lightbox to a Wix website you must click the + add icon in the top left of your editor page. Next, choose interactive, and then lightboxes.

Lightbox menu Wix - jjtposts blogs

After selecting a starting lightbox, delete the content that the preset has and design the color scheme to match your page. After doing this, keep the lightbox open and add a site menu to your page. The menu will be added to the lightbox as long as you have the lightbox open when hitting add.


How to open and close lightboxes on wix - jjtposts

Friendly tip: If you decide to close your lightbox in the editor, you can reopen it by going to “site pages” below the + add icon, then choose lightboxes.





2. Choosing how your menu will be activated


Let’s dive into how website traffic will discover your menu. There are many ways to open your lightbox menu with Wix editing tools. With this being said, this guide will not cover all of the ways you can do this, but simply show you a couple.


Just about every element on Wix has a link feature. By clicking on the link icon you can have either text, images, elements, icons, etc. linked directly to your lightbox. This is done by clicking on the element → selecting link → choosing lightbox → then selecting the lightbox you created for your menu.


Linking a lightbox to an element on wix

3. Where to place your website’s menu


The placement of your website’s menu must be in an easy to find location. Without your menu, website traffic can only navigate your web pages through internal linking and direct search. Some recommended locations to place your menu button are the following:


Site Header:

Having your menu button in the header will ensure that every page with a header on your website will have access to the menu. Therefore remembering to copy your menu’s element, picture, etc. will not be a test of your memory.


Pinned to screen:

Elements and icons that you add to your page can be pinned to the screen. In addition, many elements can be stacked on top of each other. This means that creating an icon for your menu and separately labeling it “menu” is a viable option for your website. In addition, having this menu pinned to the page means that it is always visible to your web traffic.


Top of the page:

The content placed on the top of your web page is going to be the first thing viewers see. Be careful with placement and remember to add your menu to all pages if you go with this location.


On a timer:

Lightboxes can be set on timers through the “delay” feature. This will make it so that after a set amount of time has gone by with the web page open, the lightbox will pop up. This feature is designed for advertisements, but is a good option for your menu too. Just ensure that if this menu gets closed, there is another way to open it!


Good Luck!

Good luck creating your new lightbox menus! If you have any further questions there is a comment section at the bottom of the page and we will gladly respond. For any future Wix website work or website design projects, feel free to check us out at jjtposts.com.


10 views1 comment