Jump to content

How do I link a folder title within the navigation to a page in 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/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. 

Edited by derricksrandomviews
Posted

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. 

Posted

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.  

Posted

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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?

Posted

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

services.jpg

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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.

Posted

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?

Posted
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted
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.

  • 3 weeks later...
Posted

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. 


 

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.