Mobile Menu on Desktop Click Away to Close

I have created a site with the mobile menu on desktop. My client would like to be able to close the side menu by simply clicking away from the menu and not have to use the X to close. How can I fix that? 

Thanks

Website: https://bumblebee-blenny-z38d.squarespace.com
Password: styledhabitat 

You mean click anywhere on this part?

Yes that part thank you

Sorry, no I mean click anywhere on the website and the menu would close automatically. Is this possible?

On 9/3/2024 at 3:09 PM, BloomStudio said:

Sorry, no I mean click anywhere on the website and the menu would close automatically. Is this possible?

Try this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(() => {
  document.querySelector('.header-menu').id = 'test';
  document.querySelector('.header-display-mobile .header-burger-btn').id = 'test-btn';
  
  function handleMenu(e) {
    const els = e.path;
    const menu = els.find(el => el.id === 'test')
    const btn = els.find(el => el.id === 'test-btn')
    if (!menu && !btn) {
      setTimeout(() => {
        const isOpen = document.querySelector('.js-header-burger-close-title').getAttribute('hidden') === null;
  
    if (isOpen) document.querySelector('.header-display-mobile .header-burger-btn').click();
      }, 100)
    }
    
  }
  window.addEventListener('click', handleMenu);

})
</script>