Making a Navigation Folder Title a Clickthrough Link

Site URL: https://www.twfcorfu.com/

Hello,

I'd like to add a clickthrough link to the title of a navigation folder.

https://www.twfcorfu.com/

For the first 'Accommodation' folder, I'd like the navigation title to go to this page - https://www.twfcorfu.com/accommodation

The website is on the Five template.

Thanks.

You will need to be on the business plan or above to implement this solution.

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

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

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

<script>

  $( ( ) => {
  
    $( '#main-navigation .folder-collection:first a:first' )
    
      .removeAttr ( 'onclick' )
      
      .attr ( 'href', '/accommodation' );
      
    } );
    
    $( '#main-navigation .folder-collection:nth-of-type(2) a:first' )
    
      .removeAttr ( 'onclick' )
      
      .attr ( 'href', '/resorts-choose' );
      
    } );
    
  </script>

This is for a v7.0 using the Five template.

Let us know how it goes.

On 9/28/2020 at 1:38 AM, tuanphan said:

Yes. Possible.

Can you share link to page where you use Stack images? We can check easier.

That's great thank you. It works for accommodation.

How can I change the code to work with the next navigation title, I want it to go to a page with the URL slug /resorts-choose?

Thanks.

I have updated my previous answer.

On 12/20/2020 at 10:18 PM, creedon said:

I have updated my previous answer.

That didn't work, it also broke the first Accommodation navigation title too.

2 minutes ago, whoshenry said:

That didn't work, it also broke the first Accommodation navigation title too.

I fixed it by removing the spaces either side of the number 2. Thanks for your help!

Hello there!

I'm having a problem with this too on my site. It's not live yet, but i'm trying to do the same as above but its not working for me. 

I've created a folder which i'd like to be called Directory and would like it to point to my /directory page. 

Would you please be able to help. I'm using the Artesia template.

Many thanks in advance!

@katie2203

Please post the URL to your site.

Please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hello @creedon! Thank you for your response. 

The URL is stalbans.thewearecommunity.co.uk password is help2021 and id like to make clicking on "directory" take you to the directory which is in the dropdown below it. So all you see is Directory on the title and Join Us below it as a dropdown.

Any help would be great! Many thanks in advance!

Katie

On 1/5/2021 at 7:14 PM, katie2203 said:

Hello @creedon! Thank you for your response. 

The URL is stalbans.thewearecommunity.co.uk password is help2021 and id like to make clicking on "directory" take you to the directory which is in the dropdown below it. So all you see is Directory on the title and Join Us below it as a dropdown.

Any help would be great! Many thanks in advance!

Katie

 

 

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$(".nav-item.folder:nth-child(3)").click(function() {
			var link = $(this).text(),
				href = "https://google.com";
			window.location.href=href;
		});
});
</script>

@creedon Can you help me do that same for my site? the url is https://www.designstandstogether.com/

and I would like each of the navigation titles to go to the top of the page the rest of the drop down link to. For example, When you click on BeWell, I would like it to go to https://www.designstandstogether.com/bewell/ 

@sibs

You will need to be on the business plan or above to implement this solution.

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

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

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

<script>

  $( ( ) => {
  
    // change navigation folder URL Slugs for v7.1 site
    
    const folderPositionUrlMappings = {
    
      /*
      
        the format of each line is the position of the folder in the navigation
        and the replacement URL Slug for the folder.
        
        */
        
      // '[enter position here]' : '[enter url here]',
      
      '1' : '/bewell',
      '2' : '/diversityindesign',
      '3' : '/begreen',
      '4' : '/events-full-page' // last or only item doesn't get a comma
      
      }
      
    // do not change anything below, there be the borg here
    
    const keys = Object.keys ( folderPositionUrlMappings );
    
    $.each ( keys, function ( i, key ) {
    
      $( '.header-nav-item--folder:nth-child(' + key + ') a:first' )
      
        .attr ( 'href', folderPositionUrlMappings [ key ] );
        
      } );
      
    } );
    
  </script>

This is for a v7.1.

Let us know how it goes.

@creedon @tuanphan I am having the same issue on my website (not published yet). I am trying to make the folder name link to a different page on the site. I'm using 7.1. Anyone have advice? 

@SourMonkey

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.

We can then take a look at your issue.