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

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 Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

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

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

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.

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.

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

Hello. Same problem here. We NEED a landing page for our site to be directly accessible via the menu item. How is this still not fixed? It's ridiculous that we'd need to have a menu item that says, say, SERVICES and right underneath it another menu item saying SERVICES. Squarespace, how about offering a solution to this without having to hire a separate developer for each and every paying customer asking for it?

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