Elementor Nav Menu Overlay Page Content While Opened

In this tutorial, you will learn how to close the Elementor nav menu drop down on click outside, and have a nice overlay on the page content, while the menu is opened.

Clicking the overlay, outside the drop down menu content, will close the Elementor nav menu drop down.

Finally, I will also show you how to position the drop down anywhere on the page, to have a unique layout (this is rather for desktop and tablet only).

Watch the video for the instructions!

Importantly, have the "layout" set to "Dropdown" and the "full width" option disabled

This only applies if you want the fancy dropdown on desktop.

If all you want is the overlay on mobile, while the dropdown is opened, then skip this part.

Having the layout option set to "dropdown" is only needed if you want the design of a sticky, positioned wherever you want, drop down on desktop and tablet.

The "full width" option needs to be disabled, otherwise this won't work well. In the video I show how to still have a full width sub nav on mobile.

Code required

If you just want the overlay & close on outside click, add only the part /* Overlay */ and everything below.

Copy paste this code under Advanced > Custom CSS :

/* The Dropdown */
@media (min-width:768px){
selector .elementor-nav-menu--dropdown {
    position: fixed;
    width: 600px;
    right: 130px;
    top: 0;
    margin-top:0;
}
.admin-bar selector .elementor-nav-menu--dropdown {
    top: 32px;
}
}

/* The Overlay */
selector .elementor-menu-toggle.elementor-active::after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    cursor: crosshair;
    background-color: #00000054;
}

selector .elementor-menu-toggle__icon--close {
    z-index: 1;
}

Overlay for the desktop menu layout

You can also have an overlay on your desktop menu items, for those that have sub menu items only, like this:

For this, simply use this CSS

selector .elementor-nav-menu > li.menu-item-has-children::after {
content: "";
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: transparent;
pointer-events: none;
transition: background-color 0.3s;
}

selector .elementor-nav-menu > li.menu-item-has-children:hover::after {
background-color: #00000044;
}

Finally, enjoy your new Elementor fixed background on mobile design!

You should now have a fully working fixed background image on mobile, as well as desktop and tablets!

Let me know if everything worked well for you.