elomi Posted October 26, 2021 Share Posted October 26, 2021 15 hours ago, creedon said: @elomi Please see the following. Let us know how it goes. Thanks so much for taking the time to help me with this! Where can I place the code? I can only add to Design>Custom CSS Link to comment
tuanphan Posted October 27, 2021 Share Posted October 27, 2021 18 hours ago, elomi said: Thanks so much for taking the time to help me with this! Where can I place the code? I can only add to Design>Custom CSS Settings > Advanced > Code Injection > Footer 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
elomi Posted October 27, 2021 Share Posted October 27, 2021 (edited) On 10/27/2021 at 11:03 AM, tuanphan said: Settings > Advanced > Code Injection > Footer Ooh no, that is a premium feature I see, shame! @tuanphan @creedon is there any way to get it done with the custom CSS setting? Edited October 28, 2021 by elomi Link to comment
creedon Posted October 28, 2021 Share Posted October 28, 2021 On 10/27/2021 at 5:26 AM, elomi said: is there any way to get it done with the custom CSS setting? No. CSS is for changing how things look. It can not change the structure of the page which is what is required to make the folder clickable and point to the first page in the folder. This requires Javascript. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KseniaYa Posted November 1, 2021 Share Posted November 1, 2021 (edited) Ohh, this issue drives me nuts! @creedon, I’ve tried your solution from page 2 here and it generally works as in it leads folder names to first page within but it also makes my folder names disappear from the menu at random (it seems). I can see them on homepages, then they disappear and I can see pages in the folder when I hover with a mouse. Is there a way to fix that? My site is live so I removed that code for now and stuck again. ( www.kseniaya.com ) Edited November 1, 2021 by KseniaYa Link to comment
creedon Posted November 1, 2021 Share Posted November 1, 2021 11 hours ago, KseniaYa said: I’ve tried your solution from page 2 here and it generally works as in it leads folder names to first page within but it also makes my folder names disappear from the menu at random (it seems). Is the code you mention my restore folder title navigation for v7.1 site code? I think I may know what is going on but I don't think there is a fix for that particular code. The issue is that code may work in some circumstances but not others. Please go back further in the thread to my Feb 12th 2021 post and give that code a try. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KseniaYa Posted November 3, 2021 Share Posted November 3, 2021 (edited) @creedonI looked at that day and I feel like you are just giving a snippet of a site-specific code to someone, but I am not sure where to even put it. I suppose that something in a footer code offsets this behaviour I am seeing. Any idea what? Your footer injection code looks like this: <script> $( ( ) => { // restore folder title navigation for v7.1 site $( '.header-nav-folder-title' ).each ( function ( ) { let $this = $( this ); let $thisClone = $this.clone ( ); $this.replaceWith ( $thisClone ); } ); } ); </script> Edited November 3, 2021 by KseniaYa add a name tag Link to comment
creedon Posted November 3, 2021 Share Posted November 3, 2021 19 minutes ago, KseniaYa said: I looked at that day and I feel like you are just giving a snippet of a site-specific code to someone, but I am not sure where to even put it. The post points (a link) to code that you can install which by default will make the folder point to the first folder page. Quote I suppose that something in a footer code offsets this behaviour I am seeing. Any idea what? Your footer injection code looks like this: The code you have installed will not work on your site as I mentioned. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KseniaYa Posted November 7, 2021 Share Posted November 7, 2021 @creedon gotcha. any idea what could work? Link to comment
ChuckG-Art Posted November 17, 2021 Share Posted November 17, 2021 On 5/28/2020 at 12:24 AM, tuanphan said: Add to Home > Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/services-1"]').click(function() { window.location = "/services"; }); }); </script> sounds like there is a different code for different templates?? I'm on Avenue. https://www.chuckgumpert.com/ thanks! Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 7 hours ago, ChuckG-Art said: sounds like there is a different code for different templates?? I'm on Avenue. https://www.chuckgumpert.com/ thanks! Use this code for Avenue <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('li.folder-collection:nth-child(2)>a').click(function() { window.location = "https://google.com"; }); $('li.folder-collection:nth-child(8)>a').click(function() { window.location = "https://facebook.com"; }); }); </script> 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
ChuckG-Art Posted November 20, 2021 Share Posted November 20, 2021 On 11/17/2021 at 4:43 PM, tuanphan said: Use this code for Avenue <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('li.folder-collection:nth-child(2)>a').click(function() { window.location = "https://google.com"; }); $('li.folder-collection:nth-child(8)>a').click(function() { window.location = "https://facebook.com"; }); }); </script> Worked great! Thanks! Link to comment
Chele Posted December 15, 2021 Share Posted December 15, 2021 @tuanphan Thank you so much for this! I have been looking for a workaround for a while and this works perfectly. Thank you so much! tuanphan 1 Link to comment
Derek-Johnson Posted January 26, 2022 Share Posted January 26, 2022 Hi friends, I am having this issue as well. Trying to make the folder link clickable. I have two instances of this on my site (services and about folders) and was wondering if anybody can help me. I have tried all the code I could find in this thread and others. Thanks so much. www.kaifilms.com @tuanphan Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 @Derek-Johnson Have you tried my code from my February 12, 2021 post earlier in this thread? I just tested my code locally on your site and it worked a treat! Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Nick_SquareKicker Posted February 3, 2022 Share Posted February 3, 2022 (edited) Hello, I made this code solution so that it works dynamically for every folder. Just copy and paste everything below into your code injection area. Instructions: - Name the Folder's URL with the Page URL you want the click on the nav to go and add "-1". - The click will head to that page. For Example: Linked Page URL = "about" Folder URL = "about-1" <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> jQuery(document).ready(($) => { $('.header-nav-item--folder').each(function(){ var link = $(this).find('.header-nav-folder-title').attr('href'); var page = link.split('-1')[0]; $(this).click(function(){ window.location = page; }); }); }); </script> Edited February 3, 2022 by NickIppolito paul2009 1 Hi, I'm Nick, CEO & Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Squarespace Extension ● Templates ● News ● Inspiration ● Tutorials ● Resources Link to comment
GraeMedia Posted April 10, 2022 Share Posted April 10, 2022 Trying to make a menu folder clickable and have not been able to find this setting in 7.1 (IE someone clicks the folder name rather than a page item within it). I'm having a really hard time believing that this isn't suppored by default and required custom code to enable, but everyting seems to point in that direction. How can that possibly be...? This needs to be an option on the folder settings page asap, but in the meantime, need a workaround. Any help is appreciated. Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 (edited) SS did indeed remove the clickable folder feature in v7.1. It is a default behaviour for v7.0 and some of it's templates. There are no options for v7.1 but custom code. Please see the following. Edited April 10, 2022 by creedon GraeMedia 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
GraeMedia Posted April 10, 2022 Share Posted April 10, 2022 20 minutes ago, GraeMedia said: Trying to make a menu folder clickable and have not been able to find this setting in 7.1 (IE someone clicks the folder name rather than a page item within it). I'm having a really hard time believing that this isn't suppored by default and required custom code to enable, but everyting seems to point in that direction. How can that possibly be...? This needs to be an option on the folder settings page asap, but in the meantime, need a workaround. Any help is appreciated. Update: I found a very helpful custom code from https://www.will-myers.com/articles/clickable-folders-for-squarespace-71 See below - optional: remove extra link on mobile In the code below, remove the function call on line 33, addToMobile(folder). This will prevent the mobile link from being added. <script> (function () { let folders; function createEventListener(e) { let href = e.target.href.replace("-folder/", ""); window.open(href, "_self"); } function addToMobile(folder) { let href = folder.getAttribute("href"), hrefAdjusted = href.replace("-folder/", ""), text = folder.innerText, mobileFolder = document.querySelector(`[data-folder="${href}"]`), backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"); //If it exists already if (mobileFolder.querySelector(`[href="${href}"]`)) return; let newLinkContainer = document.createElement("div"), newLink = `<a href="${hrefAdjusted}" tabindex="0">All ${text}</a>`; newLinkContainer.classList = "container header-menu-nav-item header-menu-nav-item--external"; newLinkContainer.innerHTML = newLink; insertAfter(newLinkContainer, backButton); } /* Select All Folder Links & */ function setFolderLinks() { folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]'); for (folder of folders) { addToMobile(folder); folder.addEventListener("click", createEventListener); } } /* Insert After Helper Function */ function insertAfter(newNode, existingNode) { existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling); } setFolderLinks(); })(); </script> Link to comment
swvarian Posted April 10, 2022 Share Posted April 10, 2022 @creedonor @GraeMedia I used code like this on a website I am working on: https://harp-algae-smyn.squarespace.com/ to make the Services folder clickable and become bold on hover. However, another folder, Patient Resources is not clickable (intentionally) and I don't want it to be bold on hover because then it will be confusing to the end user. Do you know how I can get this specific nav button NOT to bold on hover, but continue to allow the drop down in Patient Resources to bold on hover? I appreciate you trying to help. Sherry Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 10 minutes ago, swvarian said: However, another folder, Patient Resources is not clickable (intentionally) and I don't want it to be bold on hover Alter your ruleset that is creating that effect to the following. .header-nav-item a:not( [href="/new-patients-1"] ):hover { color : #000; font-weight : bold; } This is for v7.1 and specific to the poster's need. If you change the URL slug you will need to update this code. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
swvarian Posted April 10, 2022 Share Posted April 10, 2022 8 minutes ago, creedon said: .header-nav-item a:not( [href="/new-patients-1"] ):hover { color : #000; font-weight : bold; } Thank you! This works beautifully on desktop but nothing hovers on mobile. How can I do the same on mobile? creedon 1 Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 29 minutes ago, swvarian said: nothing hovers on mobile. How can I do the same on mobile? I don't have a solution for this issue at this time. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
swvarian Posted April 10, 2022 Share Posted April 10, 2022 10 minutes ago, creedon said: I don't have a solution for this issue at this time. I appreciate your help! Thank you! creedon 1 Link to comment
LBT_SGC Posted June 15, 2022 Share Posted June 15, 2022 @creedon Hi Creedon. I used your updated code to make the folder clickable but it doesn't seem to be functioning at all for me. Am I doing something wrong? Site: https://www.murrinemosaics.com/ Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment