Replace burger menu with a single menu item

Hi all

I built a landing page that has a single persistent CTA in the desktop header that is an anchor link to the bottom-most section of the page.

Site: https://buttercup-sparrow-a7h3.squarespace.com

I need to replace the mobile burger menu with the exact same anchor link/button that is on the desktop breakpoint, or put another way—take that CTA button that also lives in the mobile menu and have it replace the mobile burger icon. I've already hidden the burger menu with the CSS below, but that's as far as I've gotten. Any help on this would be appreciated.

// No burger
@media screen and (max-width:1024px) {
  .header-nav {
    display: flex !important;
    justify-content: flex-end !important;
  }
  .header-burger {
    display: none !important;
  }
  .header-title {
    max-width: 48% !important;
  }
  a#site-title {
    white-space: nowrap;
  }
}

@Web_Solutions thanks so much that's precisely what I needed!

If you don't mind, could you explain what from this code is exposing that menu item? I'm assuming it's more so the snippet below, but I'm curious how adjusting the display to flex is exposing the menu item.

.header-display-desktop, .header-actions, .header-actions-action

49 minutes ago, jorohaco said:

@Web_Solutions thanks so much that's precisely what I needed!

If you don't mind, could you explain what from this code is exposing that menu item? I'm assuming it's more so the snippet below, but I'm curious how adjusting the display to flex is exposing the menu item.

.header-display-desktop, .header-actions, .header-actions-action

Yes