Make the Folder Title Clickable | Squarespace 7.1

What does this code do?

This code snippet will make your folders clickable. When users click on the folder title they will be taken to the first page in the folder.

Note 1: This will only apply to the desktop version of your site.

Note 2: The folder title is already clickable in Squarespace 7.0.

Create Your Folders and Pages

The first step is to add a Folder to your Main Navigation and all the pages you want in the dropdown list. The first page in the folder will be the page that visitors land on when they click the folder title. This page will be hidden from the folder dropdown list later on.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Folder Title Clickable -->
<script>
(function () {
  var folders = document.querySelectorAll(".header-nav-item--folder");
  
  for (i = 0; i < folders.length; ++i) {
    var clickableLinkDiv = '<a class="clickable-link" href=""></a>';
    folders[i].insertAdjacentHTML('afterbegin', clickableLinkDiv);
    
    /* Copy over the Folder Title */
    var clickableLink = folders[i].querySelector(".clickable-link");
    var folder_title = folders[i].querySelector(".header-nav-folder-title");
    clickableLink.innerHTML = folder_title.innerHTML;
    
     /* Copy over the Folder Link */
    var first_page = folders[i].querySelector(".header-nav-folder-content .header-nav-folder-item:nth-of-type(1) a");
    var first_page_link = first_page.href.split("/")[3];
    clickableLink.href = "/" + first_page_link;
    
    /* Hide the Original Folder Title and First Page */
    folder_title.style.display = "none";
    first_page.style.display = "none"; /* delete this line if you want the first page to show in the dropdown navigation */
  }
})();
</script>

How To Use It

1. Create your drop down folder and pages.

2. Copy and paste the code as indicated above.