How do you make a dropdown navigation folder clickable?

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!