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

Hi Creedon, yes, very good point. I'm going to have to rename either the folder or the page to make it clearer. Thanks for your insight!

Using @creedon's code from 2/12, I'm seeing the folders being properly mapped to the correct page URL Slug, but clicking on the folders in the header does nothing. What am I doing wrong?

Page URL: radiusms.squarespace.com

Site Password: 123123

P.S. I'm not sure that I like 7.1. Seems like 7.0 was much more user friendly for those of us that are tech-saavy.

Edited April 26, 2021 by RadiusMS

@RadiusMS

You did nothing wrong.

It appears that SS has changed the underlying code for folder menus.

Give me several days to see if I can update the code to work again.

If I don't respond in that time frame with a yeah or nay on if the code will work again please bump this thread.

Edited April 26, 2021 by creedon

@RadiusMS

I have updated the cited code post. The new code should restore the click-ability.

Let me know how it goes.

@creedon

That appears to have done the trick. Thanks for your help!

I am having the same issue. I was able to get the folder title to link to a page on a desktop version but not on the mobile version. Is there a way that I can do this.

KortechFM.com

@JuleeBode

Please see my Apr 15th post earlier in this thread.

@creedon, are you telling me that I can't have the folder navigation name clickable to a page, it will just open a new menu for the folder?

 

1 hour ago, JuleeBode said:

@creedon, are you telling me that I can't have the folder navigation name clickable to a page, it will just open a new menu for the folder?

 

Can you share your site url?

@tuanphan  www.kortechfm.com

 

@JuleeBode

Menus on desktop and mobile work in fundamentally different ways.

By default on desktop the folder itself is not an active link. It is there to hover over with a mouse which activates the folder menu.

On mobile there is no concept of hovering with a mouse. So the folder is an active link that you touch and that is how you dive deeper into the folder menu.

Could the folder url on mobile be changed? Yes. But that would make inaccessible all the menu items in the folder.

Edited January 27, 2022 by creedon

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

On 5/3/2021 at 11:35 PM, joeystephensmusic said:

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

Add to Design > custom CSS

/* remove booking info on desktop */
a.header-nav-folder-title[href="/booking"] + div>div:first-child {
    display: none;
}

 

On 5/3/2021 at 11:35 PM, joeystephensmusic said:

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

Also, do you want to improve these? If yes, you can create new question.

Site URL – https://www.joeystephensmusic.com/

1. (Mobile-Products) Show breadcrumb on top?

2. (Mobile-Support Joey) Payment icons look big. Want to reduce size a bit?

I'd like to make it so that clicking the folder name 'projects' takes you to the first page in the folder - I just have a basic account. Can anyone help with that?

@Flocuss

You need Javascript to do what you want and that requires the business plan or above.

Hi-

In my header I have a top level folder "Gallery". Within Gallery is "Picture Gallery" and "Video Gallery". In the old Bedford template the top level "Gallery" was clickable and would automatically take you to the top most level item within that folder, so in this case it would default to "Picture Gallery" or you could level down and manually click on "Picture Gallery". 

I am making a new website with 7.1 and this no longer works. Support said there was a way to add some code to add this feature back in. Can anyone point me in the right direction? I am not sure where to find what template I am using in 7.1 or if that even matters in this case.

 

Thanks.

Please see the following.

Let us know how it goes.

Whats the correct script to use to make a folder clickable on 7.0?

 

Erik

@epete22

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

1 hour ago, creedon said:

@epete22

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

wearegenerous.agency

I tried the 7.0 script but don't think I did it correctly.

The folder page title is 'How We Help' with the url 'services' and the page it needs to link to is 'services overview' with the url 'services-overview'

 

<script>

 

  $( ( ) => {

  

    /*

    

      begin make navigation folders clickable

      

      SS Version : 7.0

      Template   : Marquee template family

      

      */

      

      const folderNavigationTitleUrlMappings = {

      

        /*

 

          the format of each line is the folder page Navigation Title and the

          URL for the folder

 

          for each folder page copy value from Folder Settings > General >

          NAVIGATION TITLE field. you only need exactly what can be selected

          from the field

          */

        // '[enter folder page navigation title here]' : '[enter url here]',

        ‘How We Help : ‘/services,

 

        // last or only item doesn't get a comma at end of line

        ‘Services overview’ : '/services-‘overview

        }

      // do not change anything below, there be the borg here

      $( '.main-nav .folder-parent > a' ).each ( function ( ) {

        let $this = $( this );

        const folderNavigationTitle = $this.text ( );

        const url = folderNavigationTitleUrlMappings [ folderNavigationTitle ];

        if ( url == undefined ) return true;

        $this.attr ( 'href', url );

        } );

      // end make navigation folders clickable 

    } );    

  </script>

@epete22

The reason the code doesn't work is it was designed for the Marquee template family. You site uses the Brine template family.

1 hour ago, creedon said:

@epete22

The reason the code doesn't work is it was designed for the Marquee template family. You site uses the Brine template family.

Well that makes sense, any suggestions on what to do?

On 4/8/2021 at 12:42 AM, creedon said:

I have updated my Feb. 12th code post. If your current code for a v7.1 is working there is no need to update. The main change to the code is the option to not specify any mappings and the code will automatically make the folder link point to the first page in the folder.

Hi @creedon!

Its very kind of you to help us all with this! I appreciate your time.

 

I'm having some trouble...I'm not specifying URLS, just hoping the folder title links to the first page within it.

 

Heres my Header code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://assets.codepen.io/3198845/WMSlider121520v3.2.14.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 

Heres the footer (minus the Squarekicker code):

 

<script>

  
    /*
    
      begin make navigation folder URL Slugs clickable
      
      Version      : 0.5d2
      
      SS Version   : 7.1
      
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      $( ( ) => {  const folderToPageUrlSlugMap = {
              
       
         
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( ! Object.keys ( folderToPageUrlSlugMap ).length ) {
      
        $( '.header-nav-folder-title' ).each ( function ( ) {
        
          const $this = $( this );
          
          const key = $this
          
            .attr ( 'href' )
            
            .slice ( 1 );
            
          let url = $this
          
            .next ( )
            
            .find ( '.header-nav-folder-item:first a' )
            
            .attr ( 'href' );
            
          if ( url === undefined ) return true;
          
          url = url.slice ( 1 );
          
          folderToPageUrlSlugMap [ key ] = url;
          
          } );
          
        }
        
      const keys = Object.keys ( folderToPageUrlSlugMap );
      
      $.each ( keys, function ( i, key ) {
      
        let url = folderToPageUrlSlugMap [ key ];
        
        if ( ! url.includes ( '://' ) ) url = '/' + url;
        
        $( '.header-nav-folder-title[href="/' + key + '"]' ).each ( function ( ) {
        
          $( this )
          
            .attr ( 'href', url )
            
            .click ( function ( ) {
            
              location.href = $( this ).attr ( 'href' );
              
              } );
              
          } );
          
        } );
        
      // end make navigation folder URL Slugs clickable
      
    } );
    
  </script>

<script src="https://assets.codepen.io/3198845/WMSlider121520v3.2.14.min.js"></script>

<!-- Summary Block Autoplay -->
<script>
      setInterval(click, 10000);
      function click()
      {
        $(".summary-carousel-pager-next").click();
      }
</script>

<!-- SquareKicker.com | Extension | START --><script>
  if (window.self !== window.top &&
      window.top.Static.SQUARESPACE_CONTEXT.authenticatedAccount) {
    var sk = document.createElement('script');
    sk.type = 'text/javascript';
    sk.id = "squarekicker";
    sk.src = "https://extension.squarekicker.com/kicker.js";
    sk.dataset.sktoken = "923961ec9ccde33aed8916d305991915";
    document.querySelector('head').appendChild(sk);
  }

 

 

@nicolettely

I don't think this is an issue with the code working but you may want to remove the following lines from code injection header.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In general you only need 1 copy of jQuery loaded.

As to your issue.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.