Hide mobile nav/hamburger menu with JavaScript in 7.1

I am code-injecting JavaScript/jQuery to build a smooth-scrolling, hash navigation for a fixed-top menu bar in Squarespace 7.1 (so no template). The scrolling works great on desktop; on mobile it works too, with one exception. The navigation tray stays visible on the screen after clicking a link. So the page scrolls behind the open menu and it must be closed to return to the site. This is confusing.

The plan: close the nave menu with the smooth-scrolling script. Here are the steps used to make it disappear (including code for specificity). 

1. Remove the "header menu open" class from the page body. This re-hides the menu.

   $('body').removeClass("header--menu-open");

2. Remove the "x"-shaped styling from the hamburger menu, returning it to a "=" shape. 

   $('.burger').removeClass("burger--active");

3. Remove the "hidden" HTML5 attribute on the <span> inside of the hamburger button's "open me" state (the "="). 

   $('.js-header-burger-open-title.visually-hidden').removeAttr('hidden');

4. Add the "hidden" attribute to the hamburger button's "close me" state (the "x"). 

   $('.js-header-burger-close-title.visually-hidden').prop('hidden', true); 

The problem: Everything appears as it should visually on the page, as well as the changes in the web-inspector when opening/closing the nav tray normally. But at this point the hamburger menu (in "=" state) requires an extra click to open the menu as it normally would. One click to trigger something(?) and a second to open the menu. It seems Squarespace does not recognize the added "hidden" attribute from step 4.

Does anyone know why that is, or where to start looking? I have had trouble with odd AJAX calls during page reloads, perhaps that is a hint. As this is beyond my knowledge – especially of 7.1 – any advice, direction, or thoughts are appreciated. 

You can try inspecting element their demo. https://www.squareaddons.com/shop-2/anchor-linking

@TQM8 any luck with this? I’m having the same issue.

I like the idea, but it seems easier to help the user click the close button. That way the logical abstraction of the burger menu isn't broken.

This is my code:

function closeMenu() {
	var off = $('.burger-inner');
	if (off != null && off.length > 0) {
		eventFire(off[0], 'click');
	}
}

 function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
  }