Elementor Nav Menu Overlay Page Content While Opened

Elementor Nav Menu Overlay Page Content While Opened

Table of Contents

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.

Elementor Nav Menu Overlay Page Content While Opened 1

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;
}

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.

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply