Squarespace 7.1 - Linking navigation folder to first item in the folder

As many posting here are Circle members, I'm going to link this thread to a similar thread where an answer was provided:

@paul2009 Appreciate you doing God's work and bringing the solution from another thread over to this thread. Thank you!

@dubwebdev @paul2009 Can you please share the workaround in a comment? Thanks!

On 5/21/2020 at 6:18 AM, megan10 said:

@dubwebdev @paul2009 Can you please share the workaround in a comment? Thanks!

Have you solved it yet? If no, can you share link to your site, I can give the code

On 5/15/2020 at 4:29 AM, tuanphan said:

You can use JavaScript to set event click for navigation folder title

Please help @tuanphanhttps://snorkelcookislands.com

I would really like to link the "tours" link to another page, can you please help with this?

@snorkelcookislands

// Add this code to Settings -> Advanced -> Code Injection -> Footer
<script>
  (function(){
window.addEventListener('load', function(){
	  var tours = document.querySelector('[href="/tours"]');
  		tours.addEventListener('click', function() {
	window.location = tours.href
})
})
})();


  </script>

Thank you @RyanDejaegher How can input the page I would like the header to be linked to?

I would like it to be linked to this page  https://www.snorkelcookislands.com/book-a-tour-bokun-products

@lahero Hey thanks for that, but it didn't work...

This is what I injected into the Code Injection Footer

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/book-a-tour"]');
    tours.addEventListener("click", function () {
      window.location = "https://snorkelcookislands.com/book-a-tour";
    });
  })}
  )();
</script>

Have I written something wrong here? Because the parent header "Tours" just links to the first link "Reef Snorkelling"

@RyanDejaegher Maybe you can help? 🙃

@tuanphan interested in learning how to do this too! The link to my site is: https://www.kindandbrave.co/

On 6/18/2020 at 6:18 PM, snorkelcookislands said:

@lahero Hey thanks for that, but it didn't work...

This is what I injected into the Code Injection Footer

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/book-a-tour"]');
    tours.addEventListener("click", function () {
      window.location = "https://snorkelcookislands.com/book-a-tour";
    });
  })}
  )();
</script>

Have I written something wrong here? Because the parent header "Tours" just links to the first link "Reef Snorkelling"

@RyanDejaegher Maybe you can help? 🙃

Hey @snorkelcookislands - your code doesn't make sense just yet. You are selecting the link `/book-a-tour` and telling it to go to a page called `.../book-a-tour` - just going in circles 🙂. What you need to do is take the slug from the folder and direct it to go to a different page. Once you sort out that difference, you should be good to go. I've updated my original answer to hopefully make this more clear. 

@lahero Hey, I followed your instructions but it still didn't work.

I changed the code to:

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/folder"]');
    tours.addEventListener("click", function () {
      window.location = "https://snorkelcookislands.com/book-a-tour";
    });
  })}
  )();
</script>

What am I doing wrong??

On 6/18/2020 at 6:14 PM, lahero said:

 

@snorkelcookislands - just do the following steps (the script is taken from @RyanDejaegher).

 

1. Get the slug you assigned to your folder (e.g. "/folder")
2. Add the following script to how @RyanDejaegher mentioned: Settings -> Advanced -> Code Injection -> Footer

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="FOLDER SLUG COPIED FROM STEP 1"]');
    tours.addEventListener("click", function () {
      window.location = "PAGE SLUG OR FULL URL";
    });
  })}
  )();
</script>

   3. Replace "FOLDER SLUG COPIED FROM STEP 1" with your slug copied from step 1 🙂 Make sure you leave the double quotes there.

   4. Replace "PAGE SLUG OR FULL URL" with whatever page slug you want! Make sure you leave the double quotes there.

 

This solution worked for me! Thanks @RyanDejaegher for the inspiration.

Worked perfectly, thank you!

Worked for me!! Yay and THANK YOU!

Get the slug you assigned to your folder (e.g. "/folder")
Add the following script to how @RyanDejaegher mentioned: Settings -> Advanced -> Code Injection -> Footer
<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="FOLDER SLUG COPIED FROM STEP 1"]');
    tours.addEventListener("click", function () {
      window.location = "PAGE SLUG OR FULL URL";
    });
  })}
  )();
</script>
   3. Replace "FOLDER SLUG COPIED FROM STEP 1" with your slug copied from step 1 🙂 Make sure you leave the double quotes there.

   4. Replace "PAGE SLUG OR FULL URL" with whatever page slug you want! Make sure you leave the double quotes there.

 

On 5/15/2020 at 8:39 AM, brionycullin said:

You can’t use code injection in 7.1

Do you mean for this particular issue? Code injection is possible, but I have not used it for this specifically.

On 7/3/2020 at 5:23 AM, entrework said:

Do you mean for this particular issue? Code injection is possible, but I have not used it for this specifically.

7.1 supports Code Injection, Business Plan or higher.

hey all! i found this for 7.1 and worked a treat! https://www.squareaddons.com/clickthrough-link-for-the-folder-title-access

I had success with this on (2) out of (3) of the folders on my site but no amount of trying has fixed it. My code is: 

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/news-events"]');
    tours.addEventListener("click", function () {
      window.location = "https://mcbd.squarespace.com/benefits-district";
    });
  })}
  )();
</script>

I'm trying to have the News page open when news-events folder is clicked. The same code is working for ABOUT and SERVICES section. Any ideas?

site: https://mcbd.squarespace.com

pw: 1234

An easy Javascript Solution for overriding and enabling Folder Title Links in Squarespace 7.1:

 

<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="/original-url"]').attr("href", "/new-url");
     window.addEventListener('load', function(){
       document.querySelector('[href="/new-url"]').addEventListener('click', function() {
         window.location = "/new-url";
       })
     })
   }); 
</script>

Is there any way to do this without code injection in 7.1? I don't want to have to pay quite a bit extra for a business plan just to do one thing, but this is really annoying of squarespace to reduce the functionality in what is supposed to be an update. 

My issue is that for my rental website, I want my link in the main navigation to go to 'Bedrooms' (which shows all of the rooms) and the dropdown menu only to show specific rooms (English Room, Ski Room)

Currently, the 'Sleeping' tab in the main navigation isn't a link, only a drop down menu, so I have to have a second link 'Sleeping' within the drop down menu, so that people can see all the bedrooms, which looks really stupid.

my site is http://bamboo-lime-face.squarespace.com/ 

Would be super grateful for any advice on this!

20 hours ago, hlzcp said:

Is there any way to do this without code injection in 7.1? I don't want to have to pay quite a bit extra for a business plan just to do one thing, but this is really annoying of squarespace to reduce the functionality in what is supposed to be an update. 

My issue is that for my rental website, I want my link in the main navigation to go to 'Bedrooms' (which shows all of the rooms) and the dropdown menu only to show specific rooms (English Room, Ski Room)

Currently, the 'Sleeping' tab in the main navigation isn't a link, only a drop down menu, so I have to have a second link 'Sleeping' within the drop down menu, so that people can see all the bedrooms, which looks really stupid.

 

 

my site is http://bamboo-lime-face.squarespace.com/ 

Would be super grateful for any advice on this!

 

You need a Business Plan to do this.

The solution provided by @RyanDejaegher (see code below) works great in Squarespace 7.1 on desktop, but fails on mobile for me. 🙁

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="FOLDER SLUG COPIED FROM STEP 1"]');
    tours.addEventListener("click", function () {
      window.location = "PAGE SLUG OR FULL URL";
    });
  })}
  )();
</script>

13 hours ago, DJMacDonald said:

The solution provided by @RyanDejaegher (see code below) works great in Squarespace 7.1 on desktop, but fails on mobile for me. 🙁

<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="FOLDER SLUG COPIED FROM STEP 1"]');
    tours.addEventListener("click", function () {
      window.location = "PAGE SLUG OR FULL URL";
    });
  })}
  )();
</script>

 

Can you share site url? We can check easier.

On 10/7/2020 at 8:40 AM, tuanphan said:

You need a Business Plan to do this.

so are you saying that there is no way to have a clickable navigation menu (with sub menus) without a business plan? its either:

1: only have one navigation menu (no submenus)

2: pay quite a bit extra per year to have a " business plan " 

But that's such basic user friendliness! I've never seen a website where you have to hover and then click on sub menu items- thats such a bad format. Disappointing from squarespace!