Overlays / Desktop Burger Menu

Overlays open content on top of the current page. Use page overlays for things like a desktop burger menu or info panel, and project overlays when project links should open without leaving the current overview.

Project Overlays

Project Overlays turn project links into overlays. Visitors can open a project from a page or category page, close it with the close icon and return to the page they came from.

In Lay Options → Extra Features, enable Projects Overlays Feature. This setting is only available when WooCommerce is not active and Disable Ajax / Compatibility Mode is off.

Enable Projects Overlays in Lay Options → Extra Features

After enabling the feature, open Lay Options → Projects Overlays to adjust how the overlays behave.

General Project Overlay settings

Overlap Site Title, Menu lets the overlay sit above your site title and menu. You can disable Project Overlays in the Instagram browser or on touch devices, choose whether the overlay opens immediately or only once the project has loaded, and choose which page should appear behind a project overlay when someone opens a project URL directly.

Close button and animation settings

The Close Button settings control the X icon, its optional background, colors, rounded corners and custom icon. In Animation, choose slide up, slide down, fade in or no animation. When an animation is active, duration and easing settings are shown too.

Overlay background settings

Overlay Background sets the default overlay background color. You can also override opacity and blur globally. Background behind overlay is the temporary background that appears behind the overlay while it animates in.

Any link to a project now opens the project in an overlay when the visitor is on a page or category page. Opening a project from within another project will not open a new overlay.

Project Overlays will not work if there is a shortcode in the project, the project is password protected, WooCommerce is used or Lay Options → Disable Ajax / Compatibility Mode is active.

When visitors land directly on a project URL, Lay Theme can open the project inside the overlay and show the selected page behind it. Closing the overlay takes the visitor back to that underlying page.

Page Overlays / Desktop Burger Menu

A Page Overlay turns a normal page into a layer that opens on top of the current page. This is useful for a desktop burger menu, an about overlay, a contact panel, a newsletter signup or any other page-like content that should open without leaving the current page.

A plus icon opens a page overlay; the same icon can turn into a close icon

First enable the feature in Lay Options → Extra Features. Turn on Page Overlays (Desktop Burger Menu Feature) and save your changes.

Enable Page Overlays in Lay Options → Extra Features

After that, edit the page that should become the overlay. In the right sidebar, use the Overlay box, tick Use as Overlay and click Configure Page Overlay.

The Overlay box appears when Page Overlays are active

The configuration modal controls where the overlay sits, how it opens and closes, how large it is, which burger and close icons are used, how links inside the overlay look, and whether a backdrop is shown behind it.

Configure position, animation, icons, links, backdrop and behavior

Any link to that overlay page will now open it as an overlay. This means you can use the global burger icon, add the page to a normal menu, or link to it from text and buttons.

For the full setup walkthrough, icon options, link styling and height tips, see the Desktop Burger Menu / Info Overlay tutorial.