Blur Background when Mega Menu is Active

How To
1

Is there anyway to blur the background content when the menu drop down is active?

I’ve tried various ways to complete this but haven’t hit on a decent enough solution yet. Any advice would be really appreciated!

2

I managed it by adding the following code;

CSS

/* CSS for the blur effect */

        #brx-content {
            position: relative;
            transition: filter 1s ease; /* Transition for the blur effect */
        }
        .blur-effect {
            filter: blur(3px);
        }
        #brx-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.1); /* Semi-transparent black overlay */
            opacity: 0; /* Start fully transparent */
            transition: opacity 0.5s ease; /* Smooth transition for the overlay */
            pointer-events: none; /* Ensures text underneath is still selectable */
        }
        .active-overlay::after {
            opacity: 1 !important; /* Fully visible when active */
        }

And the Javascript

<script type="text/javascript">

jQuery(document).ready(function($) {
    $('.brxe-nav-nested').hover(
        function() { // Mouse enter
            $('#brx-content').addClass('blur-effect active-overlay');
        }, 
        function() { // Mouse leave
            $('#brx-content').removeClass('blur-effect active-overlay');
        }
    );
});
</script>

I hope this helps