How to make folder titles clickable in Squarespace (7.0 & 7.1) | Day 1 of 12DOC

Beatriz Caraballo • Squarespace coding tutorials

Подписаться 946

Просмотров 3 тыс.

50% 1

This is one of THOSE little tweaks.
The ones that don’t really add anything visually to the design, but can make a heck of a difference in terms of user experience (and client happiness!).
So, if you’ve ever wanted to know how to easily make those folder titles redirect to a landing page in your Squarespace projects, this tutorial is going to show exactly how to make that happen in a heartbeat.
Let’s do it!
You can grab the code over here:
beatrizcaraballo.com/blog/fol...
------------------------------------------------
//12 Days of Christmas series
• 12 Days of Christmas
-----------------------
//Timestamps
00:00 - Intro
00:55 - Overview of the page setup
02:16 - Adding the code to make the folder title clickable
03:10 - Breakdown of the code and how to use it
04:18 - What to do when you have multiple folders in your nav?
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: beatrizcaraballo.com/vip
⇝ Get in touch: beatrizcaraballo.com/contact
----------------------------------------------------------------
Music from Uppbeat (free for Creators!):
uppbeat.io/t/soundroll/cozy-h...
License code: FUXEV90F5IPOL0VA

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@ibraonyoutube 4 месяца назад

So easy after looking for so long. Thank you

@beatrizecaraballo 4 месяца назад

You're most welcome! I'm glad you found this helpful 🙌

@andidunn1231 5 месяцев назад

This worked amazing!

@beatrizecaraballo 5 месяцев назад

So happy to hear that! Thanks for letting me know 🙌

@debbieturrell9324 10 месяцев назад

Thank you! And thank you to the other commenters, because I made the same mistake of not seeing the second 'OLD LINK'. Thought I was going mad 😅

@beatrizecaraballo 10 месяцев назад

Hey Debbie! You're most welcome and I'm glad the other comments helped you troubleshoot! 🙌

@tiniwelbers7875 11 месяцев назад

Great help, thank youuuu :-)

@beatrizecaraballo 11 месяцев назад

You're most welcome! ☺

@Ammaristhename 4 месяца назад

LIFESAVER

@beatrizecaraballo 4 месяца назад

I'm glad you found this helpful 🙌

@Artpapacom 8 месяцев назад

Thank you very much Beatriz! for the excellent, intelligible explanation, I did everything, It seems to me, correctly, but it didn’t work for me, apparently because this system does not work from the shop, but only concerns FOLDER TITLES... is this correct?

@beatrizecaraballo 8 месяцев назад

You're most welcome, Alexei! 🙌 And yes, unfortunately that customization only works for folder titles. I'd be happy to look into what could be done to make the element you want clickable, but I need to see the page to understand what you're going for. Feel free to send over a link to it to hey@beatrizcaraballo.com if you'd like me to point you in the right direction!

@Outandaboutphill Год назад

Awesome help. Just realised you need the upgrade subscription to make this work though. 😥

@beatrizecaraballo Год назад

Yes, unfortunately only business plans or above can use Code Injection 😔

@debbieturrell9324 10 месяцев назад

Quick question: I followed your tutorial on styling the active nav links. Is there a way to apply that to this workaround too? (So that when you're on the new page, the active nav for the old one shows up?) Thanks again. Your tutorials are really helpful 😊

@beatrizecaraballo 10 месяцев назад

This is a really good question! That will require a heftier workaround though, since the regular active nav approach won't cut it for that situation. Feel free to send me an email to hey@beatrizcaraballo.com with a link to your site so I can see how I can help you!

@titasoriano6873 5 месяцев назад

Great step by step! I tried both the updated code from your website and the original code from the video. Both work but behave differently on the mobile side. On mobile: The updated code takes you to the "new link" page but bypasses the drop down options. I would like the dropdown options on the mobile side. It's just a bit clunky. For now I am using the original code from this video and it seems to be working. Wondering if I am doing something wrong with the updated code?

@beatrizecaraballo 5 месяцев назад

Thank you! And yes, you can absolutely use the desktop only version (the one used in the video) to ensure mobile continues to work normally 🙌 If you want to be extra sure you have the right code on your site, scroll down to the end of the post and grab either the 7.1 or 7.0 version of "TO MAKE FOLDER TITLES CLICKABLE ONLY ON DESKTOP", depending on the template you're working with: www.beatrizcaraballo.com/blog/folder-titles-clickable-squarespace Hope that helps!

@ramakrishna8888 9 месяцев назад

Hello, I'm glad to hear that the tutorial is effective. However, I've encountered a minor glitch. On the first click, it successfully navigates to the new link, but when attempting to click on another link, it appears to stay on the same page. It's only after clicking again that it correctly redirects to the appropriate page.

@beatrizecaraballo 8 месяцев назад

Heya! That's an interesting issue. I'd have to check the site itself to see why that may be happening. Feel free to send over a link to it via email to hey@beatrizcaraballo.com so I can take a closer look!

@user-xo7qu3bu1z 10 месяцев назад

Thank you for this great tuto. Folders are cliquable without problem. But I got a problem trying to show a shop category in the sub menu. First I create the shop folder and adjust the script to redirect to the Shop like /shop-folder to /shop and it is working fine. So I create a new page as category-page and redirect it to /shop/category-page but it still show the empty category-page. As I can not add another folder in the shop folder do you have an advice to do this with a page as sub menu? Thankl you

@beatrizecaraballo 10 месяцев назад

You're most welcome! 🙌 I'm afraid I'm not quite sure what you're going for. But, from your explanation, if what you're trying to do is include a link to a category shop page as a submenu item (i.e. NOT as the folder title), instead of creating a page that redirects to the chosen category, you can use a regular "Link" instead when clicking on the plus sign to add more items to your nav. That will allow you to set up any URL you want, including /shop/category-page. If that's not what you're after, feel free to send me an email to hey@beatrizcaraballo.com to let me know a little bit more about your situation to see how I can help you.

@user-xo7qu3bu1z 10 месяцев назад

Thank you Beatriz. It works fine with the links as you suggest. It is a great advice from you. But I have another problem on cell to show the main links. I will send you an email with the url.@@beatrizecaraballo

@magicshinobi8374 Год назад

Hmmm I have Version 7.0- York family (Jasper Jin template). When I'm finished pasting the codes and adding the names of old/new links. Nothing happens when I go to click on the folder.

@beatrizecaraballo Год назад

Gotcha! Unfortunately, the 7.0 version of the code is for the Brine family templates. The York one has a different nav structure so it would need an alternative approach. I'd be happy to look into it, tho. If you're interested in working with me to achieve this, feel free to shoot me an email at hey@beatrizcaraballo.com to chat.

@jessicagurrolatrujillo5922 11 месяцев назад

Hi Beatriz, Thank you so much for this code, can you please help me with something, i can't make it work on mobile, Actually on the mobile version i'm not able to click on the carpet and when it shows me the rest it's like if the page it's not there, for exemple: i have a About us folder and then i have the about us page, i can click on the about us folder but i'm not able to see the about us page. i dont know if theres a part of the code that i'm missing Thank you, Jessica

@beatrizecaraballo 11 месяцев назад

Hey Jessica! My pleasure 🙌 I'd recommend double-checking that: 1. The code implemented is the one that corresponds for desktop AND mobile (there are different options inside the post: www.beatrizcaraballo.com/blog/folder-titles-clickable-squarespace). 2. The script part (the footer code injection one) has your About page URL on both "OLD-LINK" locations in the snippet. It kinda sounds like that's where the issue is. If both things are correct and it still doesn't work, feel free to send me an email at hey@beatrizcaraballo.com with a link to your site so I can take a look!

@BarefootArtists 8 месяцев назад

Thanks for the tutorial. I added the code as you instructed, but nothing appears. At first I thought it was because I hadn't included the old code 2x, so I added the old code to the second spot in the code. That didn't work. Then I looked at your video, and it seems the old code only appears once. I tried that. Still doesn't work. I used the jquery code you provide. Not sure what else I might need to do to make this work... I'm on 7.1 btw.

@beatrizecaraballo 8 месяцев назад

You're welcome! 🙌 I'm afraid I can't troubleshoot that without looking at the site, there could be many different things causing the issue including something small like a typo in the old-link/new-link urls. If you like, you can send over a link to your site to hey@beatrizcaraballo.com so I can take a closer look! Make sure to include the password if you're in trial mode.

@cobra.electric 3 месяца назад

wow this code is great! I have it up and running although it works on PC the code doesn't support the mobile version of the website. I used the "TO MAKE FOLDER TITLES CLICKABLE ON DESKTOP AND MOBILE DEVICES (7.1)" footer code and CSS code but it still doesn't work for mobile. The folders won't open neither the folder name can be clicked.

@beatrizecaraballo 3 месяца назад

I'm glad to know it's working right on desktop! 🙌 Hmmm, go ahead and double-check that the "OLD-LINK" is replaced in BOTH places inside the script and not just in the first instance. That's usually the cause of the issue! However, if the code still doesn't wanna work after that, feel free to send over a link to your site to hey@beatrizcaraballo.com (with the trial password if the site isn't live yet) so I can take a closer look!

@cobra.electric 3 месяца назад

@@beatrizecaraballo THANKS! I just sent my email.

@user-nz4iu9kd3r Год назад

Hey - and thank you for the video. Unfortunately it only works with the first folder.

@beatrizecaraballo Год назад

Heya! You're most welcome! Not sure if this is what you mean but you can use the same script multiple times if you need to redirect multiple folders. Take a look at minute 04:18 to see how to set things up. Hope this helps!

@skyehighinteractive6403 Месяц назад

Can this be done for mobile view? Thanks!

@beatrizecaraballo Месяц назад

Yup! The corresponding code is inside the blog post: www.beatrizcaraballo.com/blog/folder-titles-clickable-squarespace Make sure to replace /NEW-LINK everywhere you see it in the snippet you decide to use. If you need more support, feel free to reach out through beatrizcaraballo.com/contact

@tiniwelbers7875 11 месяцев назад

Unfortunately it doesn´t work on mobile view, when I click on the link (that is clickable on desktop) I don´t see any content, I just can click "back" - can you help?? please

@beatrizecaraballo 11 месяцев назад

Gotcha! I'd recommend double-checking that: 1. The code implemented is the one that corresponds for desktop AND mobile (there are different options inside the post: www.beatrizcaraballo.com/blog/folder-titles-clickable-squarespace). 2. The script part (the footer code injection one) has the corresponding page URL on both "OLD-LINK" locations in the snippet. If both things are correct and it still doesn't work, feel free to send me an email at hey@beatrizcaraballo.com with a link to your site so I can take a look!

@tiniwelbers7875 11 месяцев назад

@@beatrizecaraballothank you so much for your help!! I forgot to put in the 2nd link, didn´t see it, oops. Now it works well 🙂

@beatrizecaraballo 11 месяцев назад

@@tiniwelbers7875 Oh, awesome! I'm glad it was an easy fix. It's my pleasure! 🙌

@simonvanderschaft901 27 дней назад

Nice, but for multiple pages it doesn't work. I added the most current html code, the second navigation menu doens't get clickable. Code Footer: $(".header-nav-folder-title[href='/producten']").click(function() { window.location.href = "/alle-producten"; }); $(".header-nav-folder-title[href='/subsidies']").click(function() { window.location.href = "/alle-subsidies"; }); Still the subsidies drop down is not clickable. @Beatriz Caraballo. Could you tell me why it doesn't work? Things I already tried: - switched the "subsidies" code with the "producten" code. Than producten was still clickable and subsidies not. - controlled the URL name of the subsidies page, this was right - I putted another URL of another page in the "new link section", still subsidies was not clickable.

@beatrizecaraballo 26 дней назад

Thanks for sharing your code and troubleshooting steps, that's really helpful! The code is correct so, unless there's a typo, that doesn't seem to be where the problem is coming from. I'm afraid I can't pinpoint the issue without seeing the site, however I would recommend testing on a Guest Mode or Incognito window to see if the problem remains. It could simply be an editor glitch. If it's still not working after that, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look at your site!