Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Making a folder clickable in Squarespace 7.1


Recommended Posts

12 hours ago, tuanphan said:

Add to Home > design > Custom CSS


.header-nav-folder-content {
    top: 0px !Important;
    width: auto !important;
}

 

Unfortunately it didn't work. I mean the first item in the drop down menu disappeard but whenever I click on the folder it does nothing plus it messes up with the whole menu. It moved up, it became narrower and it doesn't close anymore.

That's such a pity I wish there was a way... ūüėě

test.png

Link to comment
  • 1 month later...
On 5/28/2020 at 3:24 PM, 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>

 

This code worked beautifully for my Services folder/dropdown menu. However, the underline (indicator) for the Services tab when you're active on that page no longer shows up as all other tabs/pages. Is there a way to add that back in? 

1184691722_ScreenShot2020-11-18at6_18_53PM.thumb.png.632b678459e72c23fcf1d46d726e732d.png1655114017_ScreenShot2020-11-18at6_18_59PM.thumb.png.33e1b30bba22f3d99b4d04d52c246c42.png

 

Link to comment
3 hours ago, creativenap said:

This code worked beautifully for my Services folder/dropdown menu. However, the underline (indicator) for the Services tab when you're active on that page no longer shows up as all other tabs/pages. Is there a way to add that back in? 

1184691722_ScreenShot2020-11-18at6_18_53PM.thumb.png.632b678459e72c23fcf1d46d726e732d.png1655114017_ScreenShot2020-11-18at6_18_59PM.thumb.png.33e1b30bba22f3d99b4d04d52c246c42.png

 

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
7 hours ago, creativenap said:

Here you go: https://www.greenr-cleanr.com/ 

Thanks!

Hi. I see underline here. Did you solve?

image.thumb.png.00fea3ca2c795181899bd7a746059672.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
9 hours ago, creativenap said:

No. That's interesting that the underline shows up in the child pages, but not the parent folder (the actual  Services page). See attached. 

By default, when clicking a menu items, SS will add a class name to it for underline formatting. However, the default dropdown title is not clickable, so SS will not do this.
When you set the click with a custom code, the SS doesn't detect that, so you get the problem above.
You will need to use JavaScript for handling this, it is quite complicated.

You can post on some FB groups: Squarespace Customization Resource Group, Squarespace Community.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Ah i'm so stuck with this. I'm using the Artesia template. I'm trying to make my folder (/directoryhome) link to /directory page and it's just not working.

Is anyone available to help?

Many thanks!

Katie

Link to comment
On 1/4/2021 at 10:07 PM, katie2203 said:

Ah i'm so stuck with this. I'm using the Artesia template. I'm trying to make my folder (/directoryhome) link to /directory page and it's just not working.

Is anyone available to help?

Many thanks!

Katie

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

hello i am also having issues with this subjects. www.zionlacroix.com is my website, I would like to keep the drop down menu for the titles (works: / shorts: etc) but also make them clickable on desktop version. i used the codes but they didnt worked with my website. can you help me through this?

 

best!

Link to comment
5 hours ago, ZionLacroix said:

hello i am also having issues with this subjects. www.zionlacroix.com is my website, I would like to keep the drop down menu for the titles (works: / shorts: etc) but also make them clickable on desktop version. i used the codes but they didnt worked with my website. can you help me through this?

 

best!

You can see this guide. I wrote code for all templates.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@ZionLacroix

This solution requires the business plan or above.

First remove any previous attempts at this effect.

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>

  $( ( ) => {
  
    // 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>

This is for a v7.1 site.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
3 minutes ago, creedon said:

@ZionLacroix

This solution requires the business plan or above.

First remove any previous attempts at this effect.

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>

  $( ( ) => {
  
    // 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>

Let us know how it goes.

Hello Creedon, I guess this is something! Now the folder is clickable but it directs me to the first project in the drop down menu. Do you have any idea how to add a separate page to that folder which contains all the titles in dropdown menu?

Best.

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...

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.  

Link to comment
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? 

 

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...