How do I link a folder title within the navigation to a page in 7.1

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

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

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?

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.

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 )

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.

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

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.

@creedon gotcha. any idea what could work?

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!

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>

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!

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

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

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

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>

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.  

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.

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>

@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

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.

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?
 

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.

10 minutes ago, creedon said:

I don't have a solution for this issue at this time.

I appreciate your help! Thank you!

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