Jump to content

How to link a folder title in navigation

Recommended Posts

Hi,

I have always used <a href="page-slug">page-title</a> in my folder navigation to create a direct link.
For some reason this has stopped working.

Does any know another work around for this? 

Link to comment

See:

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hi,

only thing I can come up with right now is this:

1. Put the page (page that you want to be linked with folder title) on the first place in to the folder.

2. Paste this code to "Custom CSS" and change only child number "3" to target specific folder that you want in your navigation menu.

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

 This works on Brine Family (TESTED) and few more I think but I haven't tested on others...

Link to comment

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


 

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
  • 5 months later...

@Vigasan I'm trying to implement this method in 7.1 with the following code (as outlined on your site):

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.header-nav-folder-title[href="/how-we-do-it"]').attr("href", "/how-we-do-it/our-process");
   }); 
</script> 

Once the code is in, hovering over the folder in my nav shows the path I want the folder to link to in the lower left corner of the page ("[my site]/how-we-do-it/our-process"), but clicking the folder doesn't perform any action . Any thoughts??

 

Edited by apelkhaz
Link to comment
On 6/9/2020 at 4:56 PM, apelkhaz said:

@Vigasan I'm trying to implement this method in 7.1 with the following code (as outlined on your site):

Once the code is in, hovering over the folder in my nav shows the path I want the folder to link to in the lower left corner of the page ("[my site]/how-we-do-it/our-process"), but clicking the folder doesn't perform any action . Any thoughts??

 

Do you have a link to the website that I can take a look at?

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
  • 2 weeks later...
1 hour ago, theresa.southern said:

This does not work for me either (in Squarespace 7.1) I noticed that your code is different in the video than it is in the text provided on your site. Could this be the problem?

Can you share link to your site? We can check easier.

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!)

Link to comment
  • 3 months later...
20 hours ago, siweisong 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?

Which template do you use or can you share site 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!)

Link to comment
  • 1 month later...

Hi @Vigasan

Love your tutorial!

I am trying to link my WORKS (folder) to my HOME link (first on nav) - so HOME doesn't show as the first link on nav? This is a template that doesn't support folder to link to another page. I couldn't find the link from the video. Do you mind helping me with what I need to paste to my code injection? 

template: nevins

site: https://orb-wrasse-anjw.squarespace.com/

password: thankyou

Also, if this works, where do I place the page HOME? As an unlinked page?

Lastly, should I expect any issues with mobile?

Thanks, Andrea

Screenshot (185).png

Edited by CucuMachine
Didn't tag person properly. Added template name..
Link to comment
On 11/26/2020 at 9:15 AM, CucuMachine said:

Hi @Vigasan

Love your tutorial!

I am trying to link my WORKS (folder) to my HOME link (first on nav) - so HOME doesn't show as the first link on nav? This is a template that doesn't support folder to link to another page. I couldn't find the link from the video. Do you mind helping me with what I need to paste to my code injection? 

template: nevins

site: https://orb-wrasse-anjw.squarespace.com/

password: thankyou

Also, if this works, where do I place the page HOME? As an unlinked page?

Lastly, should I expect any issues with mobile?

Thanks, Andrea

Screenshot (185).png

The url doesn't exist. Can you check again?

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!)

Link to comment
  • 9 months later...

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.