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

14 answers to this question

Recommended Posts

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

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: 

 


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

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

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

Create an account or sign in to comment

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


×
×
  • Create New...