Buy me a coffee

Squarespace: Make Folder Clickable

I will share code to make folder clickable in both Squarespace 7.0 & 7.1 (7.1 is latest version).

  • You need a Business Plan or higher to use this code.
  • Code can work in Trial Plan
  • You will see :nth-child(5) – this is the item number in the Main Navigation, from top to bottom.
  • Send me a message if you have any questions/the code doesn’t work (free).
  • You can send a donation if this is helpful for you 😉

Add code to Home > Settings > Advanced > Code Injection > Footer

Adirondack

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('.cf>li:nth-child(5) .folder-parent>a').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('.cf>li:nth-child(2) .folder-parent>a').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Avenue

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('nav.main-nav ul>li:nth-child(2)>a').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('nav.main-nav ul>li:nth-child(5)>a').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Aviator

Same as Adirondack Template

Bedford Template Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('nav#mainNavigation>div:nth-child(3) .folder-toggle').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('nav#mainNavigation>div:nth-child(5) .folder-toggle').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Brine Template Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('.header-nav-folder-title[href="/about"]').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('.header-nav-folder-title[href="/contact-us"]').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

about, contact-us is Page URL

Farro

Include: Farro, Haute

Same as Brine Template

Five

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('nav#main-navigation ul>li:nth-child(3)>a').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('nav#main-navigation ul>li:nth-child(5)>a').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Flatiron

N/A

Forte

Same as Adirondack template

Galapagos

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('.nav-list>li:nth-child(3) .nav-folder-toplevel-link .nav-link-text').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('.nav-list>li:nth-child(5) .nav-folder-toplevel-link .nav-link-text').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Ishimoto

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('ul#nav>li:nth-child(3)>a').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('ul#nav>li:nth-child(1)>a').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Momentum

N/A

Montauk Template Family

Include: Julia, Kent, Montauk, OM

Same as Avenue Template

Native

Same as Avenue Template

Pacific Template Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

N/A

Skye Template Family

Include: Foundry, Indigo, Ready, Skye, Tudor

Same as Bedford template

Supply

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('nav.navigation ul>li:nth-child(1)>a').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('nav.navigation ul>li:nth-child(2)>a').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Tremont Template Family

Include: Camino, Carson, Henson, Tremont

N/A

Wells

N/A

Wexley

Same as Avenue template

York Template Family

Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('nav.site-navigation>div.folder:nth-child(1)>label').click(function() {
    window.location = "https://beaverhero.com";
  });
  $('nav.site-navigation>div.folder:nth-child(3)>label').click(function() {
    window.location = "https://beaverhero.com/about";
  });
});
</script>

Squarespace 7.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
// desktop
  $('.header-nav-folder-title[href="/services"]').click(function() {
    window.location = "https://beaverhero.com";
  });
// mobile
  $('.container.header-menu-nav-item [href="/services"]').click(function() {
    window.location = "https://beaverhero.com";
  });
});
</script>

3 thoughts on “Squarespace: Make Folder Clickable”

  1. Thanks! Just sent you a donation.
    Just incase anybody else doesn’t get it working straight away.
    The code links two examples. So if you’ve only got one folder that you want to link, you can delete one. You’ve gotta change the n’th number and the URL to your own website (where you want the folder to link to).

    Reply
  2. Hi,

    I am trying to make my folders clickable through to a page – ie About us will lead through to an About us page without me needing to include it in the drop down menu.

    I am using the Lusaka template but can’t find the code for that template – are you able to help?

    Best wishes,
    Amy

    Reply

Leave a Reply to Amy Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder