Redirect a Folder Click In Navigation Menu on Squarespace

Table of Contents

Do you need to redirect a folder click in Squarespace?

If you used to have your main folder title redirect to another page on Squarespace, you would have realized that it is no longer working. Squarespace is cleaning up their coding and this has broken the feature to add code into a page title. Here is a way to continue using that feature either until Squarespace gives us a method to pick what page the folder title goes to, or for however long you want.

NOTE: This code is currently working on Squarespace 7 and Squarespace 7.1

Before we begin, if your template has Ajax Loading, make sure it's disabled by going to DESIGN > SITE STYLES.

Method 1

This method works for most templates, but if you right-click your folder and click INSPECT ELEMENTS, if you see something with the class "folder-toggle", then use Method 2 instead. An example of a template that you need to use Method 2 on is Bedford.

Step 1 - The JQuery

Go to SETTINGS → ADVANCED → CODE INJECTION and add this code into your HEADER or FOOTER field.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.Header-nav-folder-title[href="/folder-slug"]').attr("href", "/go-here-instead");
   }); 
</script>

Step 2 - Explanation of code

What this code does is that it waits for the page to load, and then targets the folder that has the specified slug. Change the '/folder-slug' to whatever slug your folder has. Also, replace '/go-here-instead' with the slug of the page you want the folder to redirect to.If you want to include multiple redirects, copy and paste the code so it's like below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.Header-nav-folder-title[href="/folder-slug"]').attr("href", "/go-here-instead");
     $('.Header-nav-folder-title[href="/folder-slug-2"]').attr("href", "/go-here-instead-2");
   });
</script>

Please Note: Your template may also use a lower case "h" so if the code doesn't work, try ".header-nav-folder-title" instead of ".Header-nav-folder-title".

---

Method 2

Step 1 - The JQuery

Go to SETTINGS → ADVANCED → CODE INJECTION and add this code into your HEADER or FOOTER field.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.folder-toggle[data-href="/folder-slug"]').attr("data-href", "/go-here-instead");
   }); 
</script>

Step 2 - Explanation of code

What this code does is that it finds your folder based on its URL slug (go to PAGES and locate your folder name on the left and hover on it, then click the gear icon to find the folder slug) and then replaces the URL it goes to when clicked. Change the "/folder-slug" to whatever your folder slug is, and replace the "/go-here-instead" with the slug of the page you want it to go to.

---

Method 3 - Squarespace 7.1

Step 1 - The JQuery

Go to SETTINGS → ADVANCED → CODE INJECTION and add this code into your HEADER or FOOTER field.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
  $(document).ready(function() { 
    // Add as many of the following line as you need (one line per folder redirect)
    $('.header-nav-folder-title[href="/folder-slug"]').attr("href", "/go-here-instead");
    $('.header-nav-folder-title[href="/folder-slug"]').attr("href", "/go-here-instead");
    
    $('.header-nav-folder-title').click(function(){
      window.location = this.getAttribute("href");
    });
  }); 
</script>

Step 2 - Explanation of code

This code works exactly like Method 1 except it also enables folders to be clickable on Squarespace 7.1. Change the '/folder-slug' to whatever slug your folder has. Also, replace '/go-here-instead' with the slug of the page you want the folder to redirect to.

---

Video Instructions