Wordpress website - Mobile menu behavior help

hoping you could help. So, Im using xtheme, and wordpress. And I have code to make my mobile menu a fixed top menu, so its always visible. I also have JavaScript to make it retract upon clicking a menu item so the menu doesn't cover the screen.

css to make it fixed:

@media (max-width: 979px) {
  .x-navbar-fixed-top {
    position: fixed!important;
  }
}

Javascript:

jQuery(document).ready(function($){
    $('.x-navbar .mobile .x-nav ').on('click touchend', function(e) {
        document.getElementsByClassName(x-btn-navbar)[0].click()
    });
});

This works to a point, however, if you go to this page: https://foresthillcentre.com/mental-health-services/

And try the menu on all of the submenu items (setup to scroll to section on same page) The menu retracts before you can click on anything, and you have to re-click the hamburger to bring up the submenus. You will see what I mean on use...

Any suggestions to fix this?

Thank you.