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

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


brionycullin
Go to solution Solved by lahero,

Question

Howdy

I used to be able to do this on other Squarespace templates so I'm not sure where I'm going wrong in 7.1. 

I've got a folder with two pages in it, and I want the folder itself to be a link to the first page in the folder. I've tried adding <a href="website/about">About</a> into the navigation title but that's not working. Any tips? 

Link to post
  • Answers 49
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Howdy I used to be able to do this on other Squarespace templates so I'm not sure where I'm going wrong in 7.1.  I've got a folder with two pages in it, and I want the folder itself to be a li

Hi Everyone,   We are in the same boat as @brionycullin - any chance there's an update to this?  We've got a few folders we would like to link to summary material on 7.1.  Anyway we can make

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

Posted Images

Recommended Posts

  • 0
On 2/14/2020 at 8:41 AM, levelup1570048693 said:

Does anyone have a solution to this? Have tried everything!

Still no solution and I am very disappointed. 

Link to post
  • 0

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

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

@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 post
  • 0
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 post
  • 0

@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 post
  • 0
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 post
  • 0
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 post
  • 0
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.

Link to post
  • 0

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

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

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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...