Folder Top Level Link Broken

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.

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!

See: 

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

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!

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?

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

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?

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

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;
}

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.

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: 

 )

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.

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

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

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!

I have now solved the problem if anyone else needs some help, do get in touch.

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

@theresa.southern I have the same issue - just discussing this on another thread 'Nav Folder Link Mobile'.  Do jump in, in case we get a solution or a definite no it is not possible! 😊

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. 

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

I was able to get the main Nav Folder to relink using the same code as sandracheesman listed above:

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

The issue I am having is this code only seems to be in place when you are on the home page. After you click onto a page on the site it no longer seems to work?

https://cube-flower-h2d2.squarespace.com/

pw: northsighttest

Any ideas to what would be causing this?

9 hours ago, Markwag123 said:

I was able to get the main Nav Folder to relink using the same code as sandracheesman listed above:

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

The issue I am having is this code only seems to be in place when you are on the home page. After you click onto a page on the site it no longer seems to work?

https://cube-flower-h2d2.squarespace.com/

pw: northsighttest

 

Any ideas to what would be causing this?

I see your site code worked here. Did you solve?