HELP...Navigation Folder click trough link stoped working!!!

Hi,

in navigation menu I have Folder with pages in it, normally Folder wasn't clickable only submenu so few years ago I have added this code in to the folder title to make it clickable:

<a href="/indoor-moebel">INDOOR</a>

and it was working flawlessly till yesterday. On Brine template now opens up first page in a folder and on Supply template it does notting as it is by default...

Please help I really need this click trough function!!!

Thanks in advance

Something has indeed changed because a number of users are reporting the same symptoms and the issue can be replicated. However, as nothing has been announced by Squarespace it isn't clear if this is a deliberate decision to close another HTML loophole (they started doing this in September 2018 to improve the security model) or whether this is an unexpected behaviour caused by something else.

It may be worth contacting Squarespace Customer Care to report the unusual behaviour in case it is symptomatic of a larger issue, but as they don't support code, I don't know how you'll fair. Do let us know.

I've had the same issue with no help from Squarespace. 

@simplywhytedesign @dariokomazec There were quite a few people running into the problem so here's a quick tutorial that should help. 🙂

I have the same issue. This should be something you can do in Squarespace without the need of coding.

Same problem here. Squarespace Customer Care told me I was using custom code on my folders and they couldn't help me.

When you click on a folder in the navigation it now takes you to the first item in the folder. So if you add a link to the folder and make it the first item in the folder, clicking on the folder in the navigation will take you to that link.

If you don't want the link to show up in the submenu you can hide the first item of a folder with CSS. In the Brine template family it should be this code:

.Header-nav-folder :nth-child(1) {display: none !important;}

I hope this workaround will help you guys.
It's rather annoying that a workaround needs to be used, when Squarespace could simply add the option to add custom links to folders.

On 12/24/2019 at 7:08 AM, Vigasan said:

@simplywhytedesign @dariokomazec There were quite a few people running into the problem so here's a quick tutorial that should help. 🙂

 

Hi,

Tried following your video. I changed the class around but I can't seem to get it to work. One thing I noticed though, the class you used seems to have a different format than mine.     $(".folder-collection folder").eq(0).prop('href', '/projects'); Do I use it as is?

I'm using the Hudson template. Website is habitechsystems.com.au.

Thanks!

4 hours ago, bca88 said:

Hi,

Tried following your video. I changed the class around but I can't seem to get it to work. One thing I noticed though, the class you used seems to have a different format than mine.     $(".folder-collection folder").eq(0).prop('href', '/projects'); Do I use it as is?

I'm using the Hudson template. Website is habitechsystems.com.au.

Thanks!

Since your template doesn't have clicks on the folder name by default, you have to do it manually by using JQuery to wrap your folder name in <a> tags, and then setting the default <a> take to pointer-events: none so that only your manual tags can be clicked.

18 hours ago, Vigasan said:

Since your template doesn't have clicks on the folder name by default, you have to do it manually by using JQuery to wrap your folder name in <a> tags, and then setting the default <a> take to pointer-events: none so that only your manual tags can be clicked.

The folder's class name is "folder-collection folder". I'm confused because of the space since classes i'm used to don't have spaces.

I added this to the home's code injection. Am I doing it right? it doesnt seem to do anything.

<script>
  $( ".folder-collection folder" ).wrap( "<a href=''></a>" );
</script>

Also, did I use the correct class name to get this to work? TIA! 🙂

21 hours ago, bca88 said:

The folder's class name is "folder-collection folder". I'm confused because of the space since classes i'm used to don't have spaces.

I added this to the home's code injection. Am I doing it right? it doesnt seem to do anything.

<script>
  $( ".folder-collection folder" ).wrap( "<a href=''></a>" );
</script>

Also, did I use the correct class name to get this to work? TIA! 🙂

you should provide site url. Difficult to check class without site url

3 minutes ago, tuanphan said:

you should provide site url. Difficult to check class without site url

site url is habitechsystems.com.au, my question is related to the nav bar

On 1/23/2020 at 11:18 AM, bca88 said:

The folder's class name is "folder-collection folder". I'm confused because of the space since classes i'm used to don't have spaces.

I added this to the home's code injection. Am I doing it right? it doesnt seem to do anything.

<script>
  $( ".folder-collection folder" ).wrap( "<a href=''></a>" );
</script>

Also, did I use the correct class name to get this to work? TIA! 🙂

Classes don't have spaces. "folder-collection folder" means it has two classes. You can target either ".folder-collection" or ".folder".

Been looking for this forever! Finally found a solution on this post:

https://squarecamp.com/custom-code-tips/how-to-link-folder-navigation-title-to-a-specific-page-on-squarespace-7

Need to add a couple lines of CSS and works like a charm! 👌

Is there any way I can integrate the Lightbox Anything plugin into this, and trigger a lightbox/pop up when people click on the folder title?

20 hours ago, SSong said:

Is there any way I can integrate the Lightbox Anything plugin into this, and trigger a lightbox/pop up when people click on the folder title?

Can you share site url? We can check easier.

6 hours ago, tuanphan said:

Can you share site url? We can check easier.

fortsferryfarm.com, the "SHOP" folder, Brine Template.

Thank you!

On 10/1/2020 at 4:48 AM, SSong said:

fortsferryfarm.com, the "SHOP" folder, Brine Template.

Thank you!

 

Try add this to Code Injection Footer. Disable Ajax Loading if the code doesn't work.

<script>
$(document).ready(function() {
	$('.Header-nav-folder-title[href="/shop-all"]').attr('href','#lightbox>lightbox-page-url');
});
</script>

replace lightbox-page-url with the page where you create a lightbox

On 10/3/2020 at 3:05 AM, tuanphan said:

Try add this to Code Injection Footer. Disable Ajax Loading if the code doesn't work.

<script>
$(document).ready(function() {
	$('.Header-nav-folder-title[href="/shop-all"]').attr('href','#lightbox>lightbox-page-url');
});
</script>

replace lightbox-page-url with the page where you create a lightbox

What should I put down as the URL in the Folder setting? That field needs to be filled to be saved.

4 hours ago, SSong said:

What should I put down as the URL in the Folder setting? That field needs to be filled to be saved.

You can enter anything, above code will change that URL