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
In this post
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>
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).
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
Hi. Each site will need a different code. Just sent to your email.