Nav Folder Links - SquareSpace 7.1

If you are familiar with how the navbar works on SquareSpace 7.1, you are aware that navigation folders (or page folders) are not clickable links by default. While working on our own site, we were looking for a way to make these folders clickable themselves and came across a few SquareSpace forum posts outlining various methods to do so. We spent some time tweaking the various solutions, but first, a disclaimer:

Note: This requires the use of code injection. Code injection is only available on Business plans and above at the time of this post. Code injection may lead to unexpected consequences. Use our contact page to get in touch if you would like a professional to implement this for you instead!

Back to the fun stuff. After some trial & error, this is where we landed. The following goes into your Code Injection Header section (Settings > Advanced > Code Injection):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  // desktop
  $('.header-nav-folder-title[href="/services"]').click(function() {
    window.location = "/all-services";
  });

  // mobile
  $('.container.header-menu-nav-item [href="/services"]').click(function() {
    window.location = "/all-services";
  });
});
</script>