make menu hover: body with dark shadow

Hi there,

It seems achievable using some CSS. The topic here appears to be similar to what you want to achieve:
https://generatepress.com/forums/topic/navigation-overlay/

I checked your site, but it doesn’t have the menu navigation, so I cannot do any testing.

Hi there,

that method will only work when you have a fill width sub menu.
So remove that CSS, as what you need will require some Javascript.

1. Hook in the following script to the wp_footer

<script>

const body = document.querySelector('body');
const menuItems = document.querySelectorAll('.menu-item-has-children');

const observer = new MutationObserver(mutations => {

  mutations.forEach(mutation => {

    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {

      const target = mutation.target;
      const hasHoverClass = target.classList.contains('sfHover');

      if ( hasHoverClass ) {
        body.classList.add('submenu-open');
      } else {
        body.classList.remove('submenu-open');
      }
    }
  });
});

menuItems.forEach(item => observer.observe(item, { attributes: true }));
</script>

This observes the sfHover class when a sub menu is open and in turn adds a class of of submenu-open to the body tag.

2. Add this CSS to style the page container when the submenu-open is present:

.submenu-open #page {
    filter: brightness(0.5);
}

Glad to be of help!