How do I link a folder title within the navigation to a page in 7.1

Site URL: https://www.truumed.com/

I have tried every trick provided in this forum to make my folder clickable in Squarespace 7.1 and nothing works. Example - I want to be able to link to the All Services page when I click on Services on this site since it's a landing page, but I can't get it to work https://www.truumed.com/

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/blog/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. 

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. 

I understand, that is why I did just that, make an overview and it is the first item in my folder. All it takes is one more link in the folder at the top. 

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.  

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>

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?

14 minutes ago, Meraki said:

Hi may I know what is it code for?

make folder title (with url services-1) clickable, to new link /services

What does that code do to the folder when using Mobile view?

1 minute ago, derricksrandomviews said:

What does that code do to the folder when using Mobile view?

it won't run on mobile. Mobile folder menu use different class ✌️

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. 

If clickable is enabled on the mobile, the user will not be able to view the folder items

Site URL: https://oval-panda-rsl8.squarespace.com/

Hi, I hope someone can help me with this. In my navigation, I have a folder with a dropdown menu. I want the folder to act as a clickable directory to a page itself. I have followed what others have done on previous versions of squarespace creating the first page from the dropdown menu as the page to link together however to no success. I was wondering if 7.1 works differently.?

We answered a lot of questions like this on forum. If you share link to your site, we can give the solution.

Your site is private. You can setup password & share url.

I've looked at previous solutions but they don't seem to work for me and I was wondering if it was due to being 7.1?

Password is Retype123
https://oval-panda-rsl8.squarespace.com/

Thanks 🙂

On 5/30/2020 at 2:10 PM, Letetia said:

I've looked at previous solutions but they don't seem to work for me and I was wondering if it was due to being 7.1?

Password is Retype123
https://oval-panda-rsl8.squarespace.com/

Thanks 🙂

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 = "https://beaverhero.com";
	});
});
</script>

replace beaverhero with page url

I'm only on a personal plan and am unable to access the advanced options. Is there another way or worth making the upgrade?

1 hour ago, Letetia said:

I'm only on a personal plan and am unable to access the advanced options. Is there another way or worth making the upgrade?

Yes, you need to upgrade, or you can disable folder title clickable, if you want do this, I will give the code for peronsal Plan

Yeah, I'll give that a go if you don't mind.

Thank you so much!! This was so helpful and worked perfectly!

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.

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?

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>

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.

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.