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

@ZionLacroix

If I understand what you want correctly. It sounds like you do need to use @tuanphan's guide.

There are instructions for your site under the v7.1 section of his guide.

If you need to discuss adding pages or organizing information I suggest starting a new thread. It is difficult to work on different issues in the same thread.

Hey @tuanphan

For the novices in the room... what do I need to replace in this code to make the Navigation Headers clickable on the below website:

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

https://www.laidbaremusic.com/

I would like COMMUNITY to directly link to: https://www.laidbaremusic.com/community

And SERVICES to link directly to: https://www.laidbaremusic.com/services

Is this possible with your code above?

Thanks in advance.  

On 2/10/2021 at 11:20 PM, Adam9 said:

Hey @tuanphan

For the novices in the room... what do I need to replace in this code to make the Navigation Headers clickable on the below website:

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

https://www.laidbaremusic.com/

I would like COMMUNITY to directly link to: https://www.laidbaremusic.com/community

And SERVICES to link directly to: https://www.laidbaremusic.com/services

Is this possible with your code above?

Thanks in advance.  

Or can anyone else help with the above please? 

@Adam9

Please see Make Navigation Folders Clickable.

This is for v7.1.

After the example line in the code add the line as follows.

        // '[enter folder page url slug here]' : '[enter page url slug here]',
        
        'mhfa' : '/mental-health-first-aid',
        

It accomplishes the same end task that the code you posted does.

Let us know how it goes.

Hi @creedon, 

Thanks very much for taking the time to do that. I copied and pasted the above in the Header & Footer, but unfortunately it still hasn't worked. Is there anything I may have missed? 

@Adam9

I see a couple of problems. Let's pull that code out for now and let me take another run at it.

When you pull out the following replace it with </style> as when you installed it I think you might have accidentally erased that text.

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

Also remove the other script from Settings > Advanced > Code Injection > FOOTER.

@Adam9

Give me a heads up when you've done that.

Hi @creedon, 

That's done now - thanks!

@Adam9

I have updated my previous code post. 

When you add the first script to Settings > Advanced > Code Injection > HEADER be very careful installing it. I suggest getting your insertion point at the very beginning of the field. Add a couple of lines. Then get the insertion point back to the beginning of the field and then paste in the script.

Then for the second script that goes in Settings > Advanced > Code Injection > FOOTER just copy and paste like you did the last time.If something goes wrong with the pasting cancel and start over. 

Let us know how it goes.

Hi @creedon

So strange, it still isn't working... it appears to still link to the first page in the folder (if you right-click on Community it opens up Laid Bare Sessions, which is the first link in the list). 

Here's the Header Code:

And the Footer code:

@Adam9

It isn't working because the jQuery library script has been put into the middle of a style tag. That won't work.

Please follow my suggestions in my previous post on how to install the jQuery script so it doesn't get mixed in with other code.

Thank you@creedon! It seems to be working. Apologies, I misunderstood and missed that the Header code should be right at the top! All fixed, much appreciated 🙏🏽

Hello,

I would like my header navigation folders to be clickable and to land on a contents page with a list of pages in that folder. Multiple folders (~5), each with (~3) pages in them. I've read a few things around and the CSS code I have seen to do it seems overly complex. Any thoughts on how to approach this?

Kindly,
Bryn

Hi, is this possible to do with version 7.0 and the template Shift? I have tried both methods by @tuanphanand @creedon but neither seem to work.

@LinneaN

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.

Do you have an example/mockup  - Also can you share link to your site?

Hi again, here's the site I am working on: https://www.arcticpeoples.com/ 

@LinneaN

Add the following to Settings > Advanced > Code Injection > FOOTER.

<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]',
        
        'Our Work' : '/our-work-2',
        'Knowledge' : '/knowledge',
        'Languages' : '/arctic-languages',
        'Youth' : '/youth',
        
        // last or only item doesn't get a comma at end of line
        
        'Arctic Leaders\' Summit' : '/arcticleaderssummit'
        
        }
        
      // 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>

This is for a v7.0 site using the Marquee template family.

Let us know how it goes.
 

Thanks so much for the help @creedon, that worked!

Hi Creedon... I'm also having trouble with this, and would love some help with some code! My site is www.nicolamoorestudio.com - I would like the SHOP menu item to be clickable and default to the 'ALL' folder item... Thank you thank you thank you!

@nicmoore

If you go back through the posts in this thread and find my Feb. 12th post., the code you need is there.

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.

I have updated my Feb. 12th code post. No need to update if your current code is working OK. The change in this version is to deal with a disappearing folder title in some circumstances.

Thanks to the people who have posted code here. I've tried a couple of ways (including Creedon's) and it works well on desktop but not on mobile. Is there a way to make it work on mobile as well?

Site: https://grapefruit-guava-yyc4.squarespace.com/

PW: FHN2021

I'm referring to the Get Involved folder. Clicks to the Get Involved page on desktop, but not mobile.

@GemGem

That wouldn't work on mobile. The folder for mobile is already clickable. It is how you dive deeper into that folder.

If we were to change the url for Get Involved folder there would be no way to dive into the folder.

An alternative interface would be needed to kind of replicate the desktop functionality. I don't know what that would be. But if you come up with an idea I suggest asking a new question. Although related to this one it's a bit more involved and specific to mobile.