Jump to content

Can I link a folder to a specific page?

Recommended Posts

  • Replies 38
  • Views 19.5k
  • Created
  • Last Reply

To have a folder in the navigation header link directly to a page:

First you have to have a page to link to the Not Linked section of your page list.

Then you can use the Header code injection.
(Home)/ Settings/ Advanced/Code Injection/Header ... paste HTML code.


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
 $('.main-nav li a').each(function () {
if ($(this).text() == 'Folder1') {
$(this).attr('href','http://www.hsustudios.com/page1');
$(this).attr('onclick','true');
}
if ($(this).text() == 'Folder2') {
$(this).attr('href','http://www.hsustudios.com/page2');
$(this).attr('onclick','true');
}
 });
});
</script>

<!-- note -->

for adding invisible notes in html

This worked for me in Ishimoto.

Link to comment
  • 4 weeks later...
  • 2 months later...
  • 6 months later...
  • 1 month later...

SUCCESS! I banged my head against the wall for the longest time trying to figure this out because none of the above code was working. I finally broke down and inspected my home page in the console and saw an error related to using mixed content. All the code examples in this thread were using the jquery script from HTTP, this makes sense since the question was originally asked a few years ago. This jquery script is now hosted with HTTPS as well.... big difference. I was using an insecure jquery script on a secure SS page, thus the mixed content error. So here's the solution, add an S to the end of the http in the jquery scripts URL

Old Example:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

New Example:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Isn't coding fun? So as per the above example from JPWV, here's the correct way, or rather whats working for me:


<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
  $('.main-nav li a').each(function () {
if ($(this).text() == 'Folder1') {
$(this).attr('href','http://www.hsustudios.com/page1');
$(this).attr('onclick','true');
}
if ($(this).text() == 'Folder2') {
$(this).attr('href','http://www.hsustudios.com/page2');
$(this).attr('onclick','true');
}
  });
});
</script>














Link to comment
  • 1 month later...
  • 1 month later...

Actually, referring back to the earlier answers, if you are pointing at a js library you'll want to avoid mentioning HTTP or HTTPS otherwise you'll find it will or won't work depending on the way you're accessing your site. Better to use

<script src="//code.jquery.com/jquery-latest.min.js"></script>

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

Hello,

I am using the Brine template and I have injected a similar code into my site's header, to no effect. I have tried capitalizing the text as seen in the browser and using http, https or nothing at all in the js tag, however it still doesn't work.When I hover the mouse over the folder, before clicking, I don't see the link I wrote in the href appearing in the bottom of the browser (Chrome).

Any ideas?Thanks

Link to comment
  • 3 weeks later...
  • 1 year later...
  • 5 months later...

Hi there!

Tiny beginner question for you.

I changed : http://www.hsustudios.com/page1 with my website link but It leads to no were cause I created a mywebsite.com/name.i.want.for.this.folder.link but it doesn't exist so logically there is nothing related to each other.?

So my questions: - Do you paste this in the header? - How do you create the href link name? - Are the folder1 and folder2 detected automatically but the code through my website? - Is the src script is suppose to be my website name?

I'll be waiting from you! Thanks a lot Laury :)

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.