FULLSCREEN OVERLAY FOR SUBMENU?
-
Hi,
I've been wanting to create a submenu with a fullscreen overlay with a background blur.
I've recreated the idea using a single Page in the Menu with overlay, but this is causing the underlying text to look funny and the X comes up in some instances, although it is not activated.Would it be possible to create a submenu with an overlay function that covers the complete screen? I've added an example to the post.
(
-
hey so u have multiple submenus stacked into each other like so:
not sure if this works correctly, not sure if lay currently supports this
pls make sure your customizer settings look like this, specifically background opacity should be set to 0
then use this css
.sub-menu::after{ width: 9999vw; height: 9999vh; background-color: rgba(255,255,255,0.5); backdrop-filter: blur(20px); content: ''; display: block; position: fixed; top: -200vh; left: -200vw; z-index: -1; pointer-events: none; }
Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"
result:
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it