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

2 hours ago, LBT_SGC said:

Am I doing something wrong?

Remove the square brackets from around the URLs you entered. You'll need to remove the forward slash from collections.

Site URL: https://fish-walrus-96ls.squarespace.com/

Hello, 

I have a menu with folders with pages inside to create a dropdown menu. 
As it is now I have to repeat the folder name, then the same name on the first page and the folder is not clickable. 
I would love for it to be so that when you click the folder you go to the content of the first page in the dropdown and that I can then hide this page so I dont need to repeat the page title twice. 

link to the page: https://fish-walrus-96ls.squarespace.com/
Password: fish-walrus-1:

I hope someone can help me with this:) 

All the best, 

Sara 

On 6/27/2022 at 3:38 PM, sara.risvaag said:

Site URL: https://fish-walrus-96ls.squarespace.com/

Hello, 

I have a menu with folders with pages inside to create a dropdown menu. 
As it is now I have to repeat the folder name, then the same name on the first page and the folder is not clickable. 
I would love for it to be so that when you click the folder you go to the content of the first page in the dropdown and that I can then hide this page so I dont need to repeat the page title twice. 

link to the page: https://fish-walrus-96ls.squarespace.com/
Password: fish-walrus-1:

I hope someone can help me with this:) 

All the best, 

Sara 

It looks like you solved with this 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 = {
    
      /*
      
        adding lines here is optional, when no lines are added the folder will
        link to the first page in the folder
        
        the format of each line is a folder page URL Slug and a destination
        page URL Slug
        
        for each folder page copy value from Folder Settings > General >
        URL SLUG field. you only need exactly what can be selected from the
        field
        
        for each destination page copy value from page Settings > General >
        URL SLUG field. you only need exactly what can be selected from the
        field
        
        duplicate the line below and remove the "// " at the beginning of the
        line
        
        */
        
      // '[enter folder page url slug here]' : '[enter page url slug here]',
      'utstillinger-1' : 'aktuell-og-kommende-utstillinger',
      'atelier-og-verksted' : 'atelier-verksted',
      'besk-oss-1' : 'besk-oss',	
      'om-glasslven' : 'om-glasslaven',
      'formidling-1' : 'formidling',
      'stallbutikk' : 'stalbutikken'
      
      
      }
      
    // do not change anything below, there be the borg here
    console.log(folderToPageUrlSlugMap);
    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;

        } ); // end each
        
      }
      
    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 each
          
      } ); // end each
      
    // end make navigation folder URL Slugs clickable
    
  } );
  
</script>

Site URL: https://www.techy.how/

I'm sure this question has been asked before, but I fail to find a staight-forward answer.

Would it be possible to make the main navigation item (folder) clickable or re-direct to a URL? If so, would a simple CSS code be the answer?

Thanks in advance!

3 hours ago, Lux321 said:

Would it be possible to make the main navigation item (folder) clickable or re-direct to a URL?

Please see the following.

Quote

If so, would a simple CSS code be the answer?

No. CSS can not get the job done as you can't make links with CSS.

I found this video on youtube and work perfectly for me, I'm a newbie so i need it more explanation about what to change.

Hope this works for everyone,

How to make folder titles clickable in Squarespace (7.0 & 7.1)