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

3 Likes
3

Thanks for taking the time to post back the solution my friend. Much appreciated

1 Like
4

Hi, do you have problem with the code? works perfectly while I’m logged in and doesn’t work logged out. I tried add the code to the wp code box but the same problem. I inserted the code block directly into the header.

5

Hi @artur.lewandowski
This sounds like a cache problem, would you have any type of cache plugin installed or cache on your hosting? Try and clear it, it might be the solution :slight_smile:

6

Sure I tried. But still nothing. I don’t want to share in the forum the url. But still didn’t find the solution.

7

I’ve checked the website you sent me, and jQuery is not defined, probably the cache plugin you’re using is enqueueing jQuery only after your script tries to run, or actually it seems you don’t have jQuery loaded on frontend at all - which is natural because Bricks doesn’t use it!

My recommendation is don’t use jQuery anyways as this is easily replicated with vanilla JS.

Try using this JS code and let me know the results, I’ve tested it on Console and seemed to work fine on the website you sent me!

document.addEventListener("DOMContentLoaded", function() {
    const navElements = document.querySelectorAll('.brxe-nav-nested .brx-has-megamenu');
    const contentElement = document.getElementById('brx-content');

    navElements.forEach(nav => {
        nav.addEventListener('mouseenter', function() {
            contentElement.classList.add('blur-effect', 'active-overlay');
        });

        nav.addEventListener('mouseleave', function() {
            contentElement.classList.remove('blur-effect', 'active-overlay');
        });
    });
});

Also I’ve upgraded the code, because the code kindly posted by @StewartR didn’t take into consideration if you were on a Mega Menu or not, it would make any nav item blur the website regardless of the menu hovered :slight_smile:

NOTE: This could also be used with a MutationsObserver for .brxe-has-megamenu having the .open class or not, but I’m not sure it would be more performant.

1 Like
8

Thank you for that. Now works perfectly!

1 Like
9

its not working when megamenu is open i tried with .open class