Mobile menu close on link clicks

Feature RequestJul 8

When building landers you often have multiple sections of the page which can be linked to from the topnav, for example FAQs, guarantee etc. These links use the “Go to section” Action.

Unfortunately, because this doesn’t trigger a page reload, there is currently no way to close the mobile menu overlay. This means the page scrolls to the correct place and the user doesn’t know it has worked and will simply get frustrated if they don’t realise they need to manually close the menu after clicking.

What I’d like to see is:

The option to add a second action or transition when a link is clicked to close the overlay for the mobile menu.

Posted by Daniel Lawman · Jul 8

Completed2

Doeke Leeuwis

Team•

Sep 21

Resolved with Instant 2.0!

If you can describe it, you can build it.

Daniel Lawman

•

Jul 9

Fixed by adding the following script to theme.liquid:

  {% if page.handle == 'yourpageslug' %}
  <script>
  (function () {
    window.__menuFix = 'loaded';

    function closeOverlay(overlay) {
      var btn = overlay.querySelector('[data-instant-action-type="open-overlay"]');
      if (!btn) return;
      btn.click();
      setTimeout(function () {
        if (overlay.getAttribute('data-state') === 'open') {
          ['pointerdown', 'pointerup'].forEach(function (t) {
            btn.dispatchEvent(new PointerEvent(t, { bubbles: true, cancelable: true }));
          });
        }
      }, 120);
    }

    document.addEventListener('click', function (e) {
      var link = e.target.closest('a[data-instant-action-type="scroll-to-section"]');
      if (!link) return;
      var overlay = link.closest('[data-instant-type="overlay"]');
      if (!overlay) return;
      setTimeout(function () { closeOverlay(overlay); }, 300);
    }, true);
  })();
  </script>
  {% endif %}

Mobile menu close on link clicks

Comments2