[Flatsome] Dark overlay on menu items with children

dropdown-menu-dark-overlay-flatsome.php

1. Add code below to your functions.php in your child theme.

add_action('wp_footer', 'qwans_add_darkness_dropdown');

function qwans_add_darkness_dropdown (){
    echo '<div class="darkness"></div>';
};


2. Add CSS

.darkness {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0,0,0,.7);
    -webkit-transition: opacity 0.25s ease,visibility 0s ease 0.25s;
    transition: opacity 0.25s ease,visibility 0s ease 0.25s;
}

.darkness-opened {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.25s ease,visibility 0.25s ease;
    transition: opacity 0.25s ease,visibility 0.25s ease;
}


3. Add script below trough flatsome->advanced->global settings->footer script

<script>jQuery(document).ready(function($) {
$( '.menu-item-has-children' ).on('mouseover', function(e) {
                    if ( $(window).width() < 1024 ) return;
                    
                    e.preventDefault();
                    if (!$('.menu-item').hasClass( '.has-dropdown' ) ) {
                         $('.darkness').addClass('darkness-opened');
                    }
                });
                $( '.menu-item.has-dropdown' ).on('mouseleave', function(e) {
                    if ( $(window).width() < 1024 ) return;
                    
                    e.preventDefault();
                    if (!$('.menu-item').hasClass( '.has-dropdown' ) ) {
                         $('.darkness').removeClass('darkness-opened');
                    }
                });
});
</script>