Mar 6, 2018

Wix Designer Tip: Add Mobile Menu on Page with No Header

Note: If you want to add a mobile popup menu that is accessed by a "hamburger menu" icon for users to click on, check out this post: Wix: Add Mobile Menu

Wix Mobile Menu Solution for pages without headers

As a Wix Website Designer, I often run into common issues with Wix – but, as I always say, there's almost always a good work-around to missing features.

One common Wix designer problem is when we design homepages in Wix that do not use the header/footer layout, the mobile pages do not have a menu option – even if you have a menu on the desktop version of the page. I often design homepages without header/footers so that I can design a more beautiful full screened homepage and have control over where the menu is placed. Then, on the subpages I use the page layout that includes the header and footer with a more standardized menu template so that I can build subpages quickly and make header/footer menu edits universally without having to edit each subpage.

The downside of using a homepage without the header/footer in Wix is that on mobile, there is no mobile menu option! You can add a mobile action bar, but I'm not a huge fan. I have also tried creating a lightbox with a fake menu made of buttons to solve this issue – using a PNG hamburger menu to open the lightbox upon clicking... HOWEVER, the Lightboxes seem to respond quite slow on mobile, so that's not the best solution.

Note: If you don't want to add visible buttons, and you would rather add a mobile Lightbox popup menu that is accessed by a "hamburger menu" icon for users to click on, check out this post: Wix: Add Mobile Menu

I hope that Wix adds an ability to add a mobile menu to pages without headers in the future, but until then, here's a mobile menu workaround:

For Sandra Dallas' website shown below, I made a "footer menu" out of Buttons on the homepage that I could reuse as a "menu" on mobile, and I put 4 of the main menu buttons on top, and put the remaining three on the bottom. The subpages, which have a header/footer, use the regular mobile menu, which is much more responsive than a lightbox version.

See my screenshots in this post to see how this was done, or check it out on the live website: www.sandradallas.com

Fake Footer Menu on Desktop: The Desktop version uses transparent buttons for a footer menu, with simple line shapes as "dividers". One downside is that this menu is NOT dynamic, so if new pages or page names are changed, we would need to reorganize/change these buttons to reflect the changes.

But, I think this is a beautiful and user-friendly solution. I actually like this solution better than using the mobile hamburger menu as it's super easy for users to click on the main pages rather than first having to jump through the extra hoop of clicking on the hamburger menu to expand the menu.