Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Sienawalker

Making a folder clickable in Squarespace 7.1

Recommended Posts

Posted (edited)

The feature to add a url as the folder name was removed from 7.0 during a revision/fix upgrade,  and is not a default option in 7.1, It was causing problems with mobile viewers. Now a folder is treated just like a page, with its own url slug that can work from anywhere off site or as a link onsite, and it is now just that, a folder meant to be opened to see what is in it, not go somewhere else.  For example:

https://myrandomviews.com/lessons

 is a folder address created just by adding the word "lessons" to the slug of the folder in settings. 

This address takes you to the first item in the folder. 

The folder in the nav bar auto opens on hover from desktop or opens on press from mobile. It goes nowhere so you can see what is in the folder. 

Edited by derricksrandomviews

Share this post


Link to post

Right - I see that that is the behavior, but it makes for a strange user experience when you want a dedicated landing page that provides an overview of all of the content on the pages below it. 

Share this post


Link to post

Yeah, that is just really poor user experience and takes away any kind of hierarchy on the site. A landing page should structurally be above any children pages that fall under it, so it's strange behavior to see <Services> on the same line as <services/page>. Hoping to find a workaround because it makes my site lack structure.  

Share this post


Link to post

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

<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="/services-1"]').click(function() {
		window.location = "/services";
	});
});
</script>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
16 hours ago, tuanphan said:

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


<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="/services-1"]').click(function() {
		window.location = "/services";
	});
});
</script>

 

Hi may I know what is it code for?

Share this post


Link to post

Good to know. I knew the clickable folder title was removed from default for some reason, like mobile viewers ending up where they didn't want to go. So this code still allows both to work correctly, thanks. 

Share this post


Link to post

Hi @Sienawalker, I am having the same problem as you. I've visited your website and am unable to click on your main 'about' or 'services' navigation folders. I can see where the links are directing me to, but my clicks don't actually redirect me to any other page.

Share this post


Link to post

Adding the code noted above worked for another site I'm working on that isn't live, but I haven't applied it to the live site.

@tuanphan - I am having an issue with adding this to allow more than one folder link - when I do it kind of jumps around between the top level pages. Any way to apply this so I can have multiple folders link to landing pages?

Share this post


Link to post
22 hours ago, Sienawalker said:

Adding the code noted above worked for another site I'm working on that isn't live, but I haven't applied it to the live site.

@tuanphan - I am having an issue with adding this to allow more than one folder link - when I do it kind of jumps around between the top level pages. Any way to apply this so I can have multiple folders link to landing pages?

<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="/services-1"]').click(function() {
		window.location = "/services";
	});
  	$('.header-nav-folder-title[href="/about-1"]').click(function() {
		window.location = "https://google.com";
	});
});
</script>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
On 5/28/2020 at 1:24 AM, tuanphan said:

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


<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="/services-1"]').click(function() {
		window.location = "/services";
	});
});
</script>

 

Thanks for the suggestion Meraki it seems to work perfectly for me.

Share this post


Link to post

Hi everyone, 

I have managed to make folder links clickable in my desktop navigation bar but am struggling with the mobile view just like so many others. I have understood that folder links cannot be clickable in the mobile nav bar. Do you have any idea for a workaround? My site URL: https://meetra.squarespace.com/

@tuanphan: Would it for instance be possible to add a menu item in a particular folder in the mobile navigation bar and hide this item when in desktop view? On my page this would mean that after clicking on the folder "Professionals" the first menu item would be sth. like "Overview" and when clicking on it the user would be directed to the page https://meetra.squarespace.com/career (the same page which opens when clicking on the folder in desktop view).

I have used the following code to make my folder clickable in desktop view: 

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/career-all"]');
    tours.addEventListener("click", function () {
      window.location = "https://meetra.squarespace.com/career";
    });
  })}
  )();

Big thanks in advance! This forum has been really helpful so far. 


 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...