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

Making a folder clickable in Squarespace 7.1


Recommended Posts

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
Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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 ✌️

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...

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?

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1 month later...
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.

Link to comment
  • 3 weeks later...

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. 


 

Link to comment
  • 3 weeks later...
On 7/29/2020 at 6:23 PM, JanaK said:

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. 


 

Just solved a case last hour. Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
1 hour ago, ClaireLondon2020 said:

Keen to hear how you solved it @tuanphan !

Thank you

Each site needs different code. Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
43 minutes ago, pinoff002 said:

Hey! Trying to make a folder clickable as well but I have a personal plan so I can't do a code injection. Is there another way to do this? Thanks! 

 

site: thisisaspace.net

There is a way, but not sure it actually work on all devices.

The idea here is that you create an item in the dropdown, then I will use CSS to move the dropdown content overlap the dropdown title, so that the first item (you just added) overrides the folder title, then you can click "dropdown title"

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1 month later...
On 8/24/2020 at 11:49 PM, tuanphan said:

There is a way, but not sure it actually work on all devices.

The idea here is that you create an item in the dropdown, then I will use CSS to move the dropdown content overlap the dropdown title, so that the first item (you just added) overrides the folder title, then you can click "dropdown title"

Hi there,

Can we try this on my website? I have the same problem of the guy since I have a personal plan as well. it's definitely worth a try.

My website is www.andreaaronica.com

Thanks @tuanphan

P.S. I have also another idea but before trying to tell you that let's see if your idea works

Edited by AA95
Link to comment
16 hours ago, AA95 said:

Hi there,

Can we try this on my website? I have the same problem of the guy since I have a personal plan as well. it's definitely worth a try.

My website is www.andreaaronica.com

Thanks @tuanphan

P.S. I have also another idea but before trying to tell you that let's see if your idea works

Add to Home > design > Custom CSS

.header-nav-folder-content {
    top: 0px !Important;
    width: auto !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...