How to make folder titles clickable in Squarespace (7.0 & 7.1)

• 00
• 01
• 02
• 99

Note: this post contains affiliate links to awesome products that I use and/or highly recommend. That means that if you make a purchase on that site through my link I may get a commission, at no extra charge to you. I solemnly swear I’ll put those earnings to good use to continue to provide my cat with the royalty lifestyle she deserves.

This is one of those little tweaks.

The ones that don’t really add anything visually to the design, but can make a heck of a difference in terms of user experience (and client happiness!).

So, if you’ve ever wanted to know how to easily make those folder titles redirect to a landing page in your Squarespace projects, this tutorial is going to show exactly how to make that happen in a heartbeat.

Let’s do it!

Note: if you’re already customizing your client’s site header, you may also want to check out some of these other navigation tweaks by Rasmus (affiliate) that can help you do other things like inverting your logo colors (affiliate) on certain pages and adding a mega menu (affiliate)!

Tutorial

Overview & timestamps

There’s not much to this one!

It’s a matter of being able to tell your browser WHICH link is supposed to change, and WHERE it should direct to on click.

1. 00:00 - Intro

2. 00:55 - Overview of the page setup

   Before jumping into the code, I’ll quickly show you how I have my folder and landing page set up, so that you can see what’s required to use the code in the next steps.

3. 02:16 - Adding the code to make the folder title clickable
   Next, we’ll add the little script that’s going to help us achieve the “clickability” of the folder title inside the Code Injection section of our site.

4. 03:10 - Breakdown of the code and how to use it
   To better understand how the same script can be used over and over again, we’ll take a minute to translate what the function is doing, and where the information regarding the site in the works needs to be included.

5. 04:18 - What to do when you have multiple folders in your nav?
   And, to wrap things up, we’ll take a quick look at what can be done if you have more than one folder in your navigation, and you want to make ALL their titles clickable so they can redirect to different pages.
   

Simple, right?

I hope you found this one helpful!

Until next time,

B.

---

Full code

February 2023: the code has been updated! You can now choose to make folders clickable only on desktop or on both desktop AND mobile devices.

jQuery library (if needed for either scenario)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

To make folder titles clickable on desktop AND mobile devices (7.1)

Footer code injection

<!-- TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.1) -->
<script>
  $(".header-nav-folder-title[href='/OLD-LINK'], .header-menu-nav-item a[href='/OLD-LINK']").click(function() {
     window.location.href = "/NEW-LINK";
  });
</script>

CSS

/*TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.1)*/
#header .header-menu-nav-folder--open {
  transform: none !important;
}
#header .header-menu-nav-folder--active:not([data-folder="root"]) {
  transform: translateX(100%);
}
#header .chevron.chevron--right {
  display: none;
}

To make folder titles clickable on desktop AND mobile devices (7.0)

Footer code injection

<!-- TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.0) -->
<script>
  $(".Header-nav-folder-title[href='/OLD-LINK'], .Mobile-overlay-nav-item[data-controller-folder-toggle='OLD-LINK']").click(function() {
    window.location.href = "/NEW-LINK";
  });
</script>

CSS

/*TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.0)*/
.Mobile .Mobile-overlay-menu-main {
  transform: none;
}
.Mobile .Mobile-overlay-folder {
  transform: translateX(100%);
}
.Mobile-overlay-nav-item--folder:after {
  display: none;
}

To make folder titles clickable ONLY on desktop (7.1)

Footer code injection

<!-- TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ONLY ON DESKTOP (7.1) -->
<script>
  $(".header-nav-folder-title[href='/old-link']").click(function() {
    window.location.href = "/new-link";
  });
</script>

To make folder titles clickable ONLY on desktop (7.0)

Footer code injection

<!-- TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ONLY ON DESKTOP (7.0) -->
<script>
  $(function() {
    $(".Header-nav-folder-title[href='/old-link']").attr('href', '/new-link');
  });
</script>