I would like a separate button/link in the middle of one page to essentially open up the burger menu on mobile site

Question

I am working through Squarespace, and am open to adding code anywhere. I have a site, I have a private page for first time guests that will really only be used on mobile devices because its only being shared via QR code (not the point but just know its primary viewing will be mobile)

What I would love is for the user to be able press a button within the page (i.e. a "learn more" button), and have that button essentially open up the upper right hand burger menu.

The reason for this is it's a site with many different tabs and for a first time guest seeing a list of buttons for each page 1. Looks bad and 2. Isn't really helpful and even if I try to clean it up with an accordion it still looks silly to me.

SO, all that being said how would I either code a button in Squarespace or just use one of the pre-made buttons to trigger the nav burger expanding on mobile?

Answer 1

The following code, inserted via a Code Block on the page in question, should create a button which, when clicked, opens the navigation.

<button id="navOpener" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element">
  LEARN MORE
</button>

<script>
  (function() {
    document.getElementById("navOpener").addEventListener("click",function(e) {
      document.getElementsByClassName("header-burger-btn")[1].click();
    });
  })();
</script>