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

Folder Top Level Link Broken

Question

Template: Forte

Hi all,

I setup folder links using <a href="url slug"> to link to an alternate menu, but they have since ceased to work. Thinking that it might have been some issue with the relative addresses, I have tried using external addresses to no avail.

 

Ling.

Share this post


Link to post

20 answers to this question

Recommended Posts

  • 0

I am currently experiencing the same issue and am also looking for a fix. While not a designed feature, this was a popular work around, and had worked for me for a long time. It now seems to be broken.

To help explain further, placing a folder in the nav normally works just by acting as a drop down, though are many reasons to want the top level to actually link to a real page too when clicked, in addition to having the drop down.

Not sure what recently changed, but if there are any ideas on how to fix this, I'm sure Ling, myself, and many others would love some ideas!

Annotation 2019-12-18 151409.png

Share this post


Link to post
  • 0

See: 

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 2

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 Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Book Live Help | Squarespace Video Tutorials

Share this post


Link to post
  • 0

Hi @Vigasan I tried following your instructions on my client's website www.RenegadeWyoming.com. I too was using the old method of inline html code for the Page Titles to redirect to a different page other than the first drop-down nav item. I then watched your YouTube video and entered this code injection into the header as instructed (nothing changes): 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$( document ).ready(function() {

$(".Header-nav-folder-title").eq(0).prop('href', ‘/amenities’);

});

</script>

Would you be able to help me figure this out/ tell me what I'm doing wrong here? I need my Amenities page to go to main Amenities page and Activities page to do the same instead of going to the first dropdown. Thank you!

Share this post


Link to post
  • 0
On 12/30/2019 at 3:26 PM, nicolebespoke said:

Hi @Vigasan I tried following your instructions on my client's website www.RenegadeWyoming.com. I too was using the old method of inline html code for the Page Titles to redirect to a different page other than the first drop-down nav item. I then watched your YouTube video and entered this code injection into the header as instructed (nothing changes): 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$( document ).ready(function() {

$(".Header-nav-folder-title").eq(0).prop('href', ‘/amenities’);

});

</script>

Would you be able to help me figure this out/ tell me what I'm doing wrong here? I need my Amenities page to go to main Amenities page and Activities page to do the same instead of going to the first dropdown. Thank you!

Hey Nicole,

It looks like it's working on your website, did you figure it out already?


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 Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Book Live Help | Squarespace Video Tutorials

Share this post


Link to post
  • 0

@Vigasan They currently go to the first page item on the dropdown list. They use to go to main amenity and activity pages that had all of the items listed. For example the Amenities page now goes to the Lodge page instead of the main Amenities page the way it was setup before the new Squarespace update (I use to use the <a href="url slug"> code to make this happen). I'm using the Moksha template if this helps at all. 

Share this post


Link to post
  • 0
9 hours ago, nicolebespoke said:

@Vigasan They currently go to the first page item on the dropdown list. They use to go to main amenity and activity pages that had all of the items listed. For example the Amenities page now goes to the Lodge page instead of the main Amenities page the way it was setup before the new Squarespace update (I use to use the <a href="url slug"> code to make this happen). I'm using the Moksha template if this helps at all. 

Hey Nicole, is my code currently entered into the website still? If not, could you put it back in and let me know when it's in?


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 Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Book Live Help | Squarespace Video Tutorials

Share this post


Link to post
  • 0
<script> $(function(){ $(".folder-parent").eq(0).click(function(){ window.location.assign("resort") }); }); </script>

Class, entity number, function, relative address.

I have just duplicated for each folder, but maybe there is a more efficient way.

Thanks to Vigasan.

 

Ling.

Edited by Lingwisyer

Share this post


Link to post
  • 0

Here's an alternate solution if  you don't mind the target page being in your folder (just hidden in nav).

  1. Place the page you want the folder to link to as the 1st item in the folder
  2. Use CSS to hide the first page link in the nav
nav.Header-nav .Header-nav-item--folder:nth-child(1) .Header-nav-folder a:nth-child(1) {
    display:none;
}

 

Edited by jcack

Share this post


Link to post
  • 0
On 2/9/2020 at 5:44 AM, jcack said:

Here's an alternate solution if  you don't mind the target page being in your folder (just hidden in nav).

  1. Place the page you want the folder to link to as the 1st item in the folder
  2. Use CSS to hide the first page link in the nav

nav.Header-nav .Header-nav-item--folder:nth-child(1) .Header-nav-folder a:nth-child(1) {
    display:none;
}

 

That is an option for templates that use top level links by default. Unfortunately, templates such as Forte do not.

Share this post


Link to post
  • 0

This answer from @Rammy worked for me to hide the top navigation link on Brine, and it uses the top link by default as well. It may work on Forte.

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

Just add your desired landing page to the top spot of the folder, and then hide it by pasting that into your CSS Injection.

(On this topic: 

 )

Edited by BemboomDesign

Share this post


Link to post
  • 0

Here's a vanilla Javascript solution that doesn't require importing a jquery file. It works for non-mobile sizes as well as for the mobile menu. You may or may not need to adjust the CSS selectors depending on your own templates configuration (Chrome/Firefox extension can help greatly here if the normal developer tool inspector is not resulting in a successful selector for you), and you definitely will need to paste in your own unique 'folder-toggle-####' to get the mobile menu link to function properly.

<script>
/* Make link work for collection folder in main nav */
document.querySelector("div#navigation-bottom  nav#main-navigation  .folder.folder-collection > a").outerHTML = '<a href="/url-for-folder">Name of Folder</a>';

/* Make link work for mobile menu */
document.querySelector("label[for=folder-toggle-5a55a54ce2c483133c584db1]").outerHTML = '<label for="folder-toggle-5a55a54ce2c483133c584db1" class="folder-toggle-label"><a style="display:inline;" href="/url-for-folder">Name of Folder</a></label>';
</script>

Rant mode on for a second: all of the solutions above, including this one, are ridiculous from the perspective that folder top level linking should just work across any Squarespace theme. Bonus annoyance points for the fact that everyone's original round of workarounds were silently broken for, in my case, months across multiple client sites by Squarespace updates to production sites. (quite an achievement - an update that doesn't only not fix the original problem but makes sure to screw up anyone's attempt to do so themselves 🤨)

Good luck.

Edited by CalebGilbert

Share this post


Link to post
  • 0
8 hours ago, CalebGilbert said:

Bonus annoyance points for the fact that everyone's original round of workarounds were silently broken for, in my case, months across multiple client sites by Squarespace updates to production sites. (quite an achievement - an update that doesn't only not fix the original problem but makes sure to screw up anyone's attempt to do so themselves 🤨)

 

By the response from a person in SQ support, the functionality that everyone was using was removed due to "possible future issues on your site are correlated to the code added to the navigation title"...

Share this post


Link to post
  • 0
Quote

By the response from a person in SQ support, the functionality that everyone was using was removed due to "possible future issues on your site are correlated to the code added to the navigation title"...

Yep, they cleaned up allowing code injection via the folder UI naming fields, meaning that any HTML input there is now escaped (meaning not included in the final rendered output of the page). As a security practice this is basic backend-development-101 and the development team have surely known about it forever, which leads me to believe that at some point, wayyyy back when, that it was someone's conscious decision to allow the oversight in order to cover up some missing functionality (such as top level links not working). I'm sure they all imagined they would 'circle back' in some future development cycle and fix everything properly 'one day'.

So it's great they decided to move on to more accepted security practices for user input areas, but it's very unfortunate that the ultimate outcome was to silently break production websites while still not offering a proper way to have main navigation elements work as expected. Anyway, I digress...

Share this post


Link to post
  • 0

Hi, I wonder if anyone can assist with the issue I am having.  The site is: https://bassoon-dog-tknb.squarespace.com/ and the p/word: SandraCB

My href folder navigation menu works fine, and all the links work using this jquery in the code injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $( document ).ready(function() {
    $(".Header-nav-folder-title").eq(0).prop('href', '/aboutus2');
      $(".Header-nav-folder-title").eq(1).prop('href', '/wines2');
      $(".Header-nav-folder-title").eq(2).prop('href', '/sustainability2');
      $(".Header-nav-folder-title").eq(3).prop('href', '/news-and-views2');
    $(".Header-nav-folder-title").eq(4).prop('href', '/visit2');
  });
</script>

and this code for each Nav title link with the correct nav folder title: <a href="/aboutus2">About Us</a>

I have then added this code with the relevant name to each paragraph on the folder nav menu page via a code block : 

<p id="the-history">
  </p>

all of this worked fine until recently, but the issue I have now is if I am on a page of the website, e.g 'Our Story' and I want to go to the 'Wildlife' section on the Sustainability page.  What happens now is the link takes me to the top of the Sustainability Page but not the Wildlife section where the code block is. The links to the code blocks only work on the page they are on e.g. If I was on the Sustainability Page the link to Wildlife takes me to the correct section.  It seems not to work if it is a page jump. 

Any ideas?  

Thank you!

 

Share this post


Link to post
  • 0

@sandracheesman I don't have your exact problem but saw you were active on the thread and wonder how you may have dealt with linking the top level folder nav in mobile. The site I am working on works fine on desktop but on mobile, you can only click on the sub-nav items which would skip over a significant portion of the page.

Share this post


Link to post
  • 0
Posted (edited)

Just for folks information, a nav folder url slug still functions, but from outside the site and it goes to the first item in the folder. Here is an example from my site:

https://myrandomviews.com/lessons   

lessons is the url slug for the folder title. 

On my site the folder title opens the folder on hover but clicking it goes nowhere. That doesn't bother me, because it causes less confusion with mobile viewers. They cannot accidentally open the folder and then end up somewhere they were not intending to go. They press the folder title to open and close the folder. 

Edited by derricksrandomviews

Share this post


Link to post
  • 0
Posted (edited)

Hi, I need to direct to a non-linked index page from the top-level folder. Any way to do that without code since the site is on the basic/personal plan?

**Edit** I should add that the folder only contains links to sections in the index page and no real pages

Edited by Zineta

Share this post


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