How do you make a dropdown navigation folder clickable?

For anyone on the dev platform , this is what I did on the Five Template.

I edited the main.nav block as followes, I can't remember exactly what I changed as I don't have the before and after but I think the bold text JSON may have been the only alteration. This will cause the folder link to automatically trigger the folder URL.

<a href="{collection.fullUrl}" {.if folderActive} class="active-folder"{.end}>{collection.navigationTitle}/

This worked great for my desktop version. But now on mobile I'm unable to see the subpages of the folder. It goes straight to the first page link. Is there a way to disable this on mobile?

This worked great for my desktop version. But now on mobile I'm unable to see the subpages of the folder. It goes straight to the first page link. Is there a way to disable this on mobile?

Hi @dhoulb I added these codes... The folder was clickable but did not take me to anypage it just clicked remained on the same page...Any solution?

Check out this solution.

https://answers.squarespace.com/questions/13008/folder-navigation%3A-top-folder-doesnt-link-to-anything,-can-i-get-it-to-or-remove-link-behavior.html

@dhoulb

Have you found a resolution to your problem? I'm experiencing the same issue in that clicking on the folder title will not take me to the page I've created.

~Jon

I'm having the same problem. I'm using FIVE template, and I tried using this Code Injection, and when I click on the folder link it does not take me anywhere. I want it to take me to the first page in the folder. And then I would like to hide the first item in the folder so there is not two links with the same name in the Navbar. Anyone? Please help.

Thank you @dhoulb, this workaround did the trick for me in the Five Template.

what I did was: - create a subpage in a folder. Move this subpage to the top of your pages list within this folder. (important for code to work) - paste @dhoulb 's first block of code into the Code Injection field for the site's Footer section. - paste the second line of code provided by dhoulb (starting with .folder-collection) into the custom CSS to hide the new subpage from the folder's drop-down menu.

you should now be able to click thru the folder title in the top nav to get to the new hidden subpage.tagging: @nicedayvince and @evolutions4 in case you were still looking for help.

I found a work around that involves adding the page in the drop down list, but here's what I did.I edited the CSS as follows:

.folder:nth-child(2) .subnav .collection:nth-of-type(1) {
 visibility:hidden;
 display:none;
}

What we have here is a way to access the first link in a drop down list, and make it disappear.

nth-child() allows you to change the CSS of the nth child element of whatever element you are accessing, in this case, the .folder class that is used for navigation folders. You'll have to take a look at the source page to make sure you understand which elements you need to access.

In this case, I accessed the first instance ( nth-of-type(1) ) of the .collection class within the .subnav class, and changed the visibility to hidden, and the display to none.

This way you could, for example, place a page called Cars within a folder called cars as the first sub page, then make the sub page invisible. The Folder still links to the invisible page, but now you don't visibly have a folder and page with the same name.

Hope this Helps!

 

On 9/6/2018 at 4:56 PM, ScottB1570048503 said:

I found a work around that involves adding the page in the drop down list, but here's what I did.I edited the CSS as follows:

.folder:nth-child(2) .subnav .collection:nth-of-type(1) {
 visibility:hidden;
 display:none;
}

 

 

What we have here is a way to access the first link in a drop down list, and make it disappear.

nth-child() allows you to change the CSS of the nth child element of whatever element you are accessing, in this case, the .folder class that is used for navigation folders. You'll have to take a look at the source page to make sure you understand which elements you need to access.

In this case, I accessed the first instance ( nth-of-type(1) ) of the .collection class within the .subnav class, and changed the visibility to hidden, and the display to none.

This way you could, for example, place a page called Cars within a folder called cars as the first sub page, then make the sub page invisible. The Folder still links to the invisible page, but now you don't visibly have a folder and page with the same name.

Hope this Helps!

Hey Scott,

I've been considering doing this with a clients site as she kind of has 3 redunant items in 3 seperate menu dropdowns (in other words it would be better if pepole would just click on the main folder name as you've been discussing here.

But I'm curious what people think about seeing this when there are other instances on the menu where we DO need a 'heading' nav/folder item and it isn't clickable even though you get the hand rollover icon? Thoughts?

Attempted the use of this Code Injection, and once I click on at the folder hyperlink it does not take me anywhere. I want it to take me to the first web page inside the folder and blogs.

As you can see from this thread this clickable folder title request, problem, has been going on for years, and when the folder is clickable by default, in some templates, there are lots of folks asking for the opposite, make the folder title non clickable. My response is this, when your site is viewed on a desktop usually with a mouse/pointer then the viewer has  ability to hover and something happens, the folder opens and then then,  choose which folder to view the contens of , other viewers, form mobile devices,  have to click to make something happen. For the second group if they click to open, or they think they are doing that, they will find themselves looking at a page and not what is in the folder.

Now can you  imagine that we are talking about a real file folder? You are standing in front of a cabinet drawer with four labeled files in it, your hand is just about to touch the handle when, magically,  the drawer opens, showing it contents, that is kind of cool. The files in it are labeled, and you can now choose which one you want take out to open. Another person, well that doesn't work for them, they have to put their hand on the handle, they start to open it and the next thing they know they are sitting back in their office looking at the contents of a file spread  out on their desk., but it isn't the one they wanted or maybe it was, they don't know because they never saw the un opened ones in the cabinet. 

On 9/23/2020 at 6:24 PM, hemlasdse33 said:

Attempted the use of this Code Injection, and once I click on at the folder hyperlink it does not take me anywhere. I want it to take me to the first web page inside the folder and blogs.

See this guide. https://beaverhero.com/squarespace-make-folder-clickable/

hey all ! I am trying to make my navigation folders clickable but cannot insert code as I am not on business plan ...is there any way around it ?
www.bloomberlin.de
 

On 3/19/2021 at 4:17 AM, chazzzzzz said:

hey all ! I am trying to make my navigation folders clickable but cannot insert code as I am not on business plan ...is there any way around it ?
www.bloomberlin.de
 

This will need a trick..Do you still need help on this?