Jump to content

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

Go to solution Solved by lahero,

Recommended Posts

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

 

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
  • 4 weeks later...

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

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • Solution
On 6/16/2020 at 6:58 PM, snorkelcookislands said:

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

 

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

Edited by lahero
Link to comment

@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? 🙃

Link to comment
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. 

Edited by lahero
Link to comment

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

Link to comment
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!

Link to comment
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.

 

 

Edited by theresa.southern
Link to comment
  • 2 weeks later...

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

Link to comment
  • 2 weeks later...

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>

 

Link to comment
  • 2 months later...

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.

 

image.png.d291d2343205d667abcb85958f5406de.png

 

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

Would be super grateful for any advice on this!

 

image.png

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment

Create an account or sign in to comment

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

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