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

  • Replies 58
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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> $(docum

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 beha

Hi may I know what is it code for?

Posted Images

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

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.  

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>

 

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?

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

Link to post
  • 2 weeks later...

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.

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?

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>

 

Link to post
  • 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 post
  • 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 post
  • 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?

Link to post
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"

Link to post
  • 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 post
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;
}

 

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