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

I am using the Five template and have set up a folder style navigation. Is it possible to get the top level navigation (the folder) to go to the first sub-page when clicked?

Currently there is no way to get it to go anywhere. In Squarespace 5 you could set a page to be the default page of the folder when the folder was clicked. When you rollover the folder it behaves like a link so from a usability stand point it should link to something.

If I can’t get it to link, can I remove the “looks like a link” behaviors (e.g. rollover color change, mouse pointer change) just on the folders?

I am also having trouble with the drop-downs disappearing when I rollover them to click. This is another reason I want to be able to click the folders – when I am testing I can’t get to my subfolders!

First create an UNLINKED page that you want the top level nav to link to. Copy the URL generated for the page. Create a Folder and in the field where the Folder name goes add an href tag to the unlinked page title.

Example: I wanted my top level nav (Folder) to link to an unlinked page with the URL: /keynote-speaking. In the Configure Folder popup I inserted this code:

<a href="/keynote-speaking">Keynote Speaking</a>

Voila! It worked!

Thank you very much, bobvonelgg! That works also in Atelier template... but not completely. I mean, I set an unliked page to be the default page of the folder when it was clicked. The content of this default page are links to all the pages inside the folder. In Android mobile screens, the pages inside the folder appear in the same level as main navigation links... A mess :(In PC screens, the folder pages appear 1 second in the main navigation menu and then vanish (I want them to appear always). Once I click in any folder page, all the pages appear again in the main nav menu.Thank you!

I am using the Aviator Template, I used the href to link the folder to a page, my next question is can I change the drop down menu activation to mouse over/hover instead of the current +/- activation.

Since I posted my answer I have found issues like what you have described. I also ran across the need to have to edit CSS, including the mobile specific CSS. So in short, what I thought was an easy solution isn't as easy as I hoped. I have removed my top level linking and will post another solution if I can come up with one.

Since I posted my answer I have found issues like what you have described. I also ran across the need to have to edit CSS, including the mobile specific CSS. So in short, what I thought was an easy solution isn't as easy as I hoped. I have removed my top level linking and will post another solution if I can come up with one.

Thank you bobvonlegg. I am in the Five template and I think it is working ok (I have the nav bar on top not on the side -- does that impact it? I wasn't able to get side nav working hierarchically at all to begin with). I'll have to check how it looks in mobile. Can you elaborate on the issues it is causing?

I was actually able to link it to the first page within my folder (it didn't have to be unlinked) by doing as you said and naming the folder itself and was able to use a relative link:

<a href="/schooling/">Cross Country</a>

I'll report any issues I come across back later!Thanks!

What configure folder popup do you mean? When i click on the only settings button that is there, all that is possible is ability to change url for that particular collection. I haven´t found anything else. Hm..

My dream template should looks like Five with two menus , and the first one on the top of the page should be just links to other pages. No hover links and anything else. Could this be made in your opininon? Maybe with header injection html or so..

This is a good work around but should totally be built into the folders. You should be able to set it like you would a pass through link on a gallery image.

Also another drawback is the fact that if you have active links set to a special colour it kills it so you don't see that colour when yo are in that folder.

I was able to get this to work but now my folder is showing up lower than the rest of the nav - did anyone find a work around for this?

http://20x60.com/

If you use {collection.fullUrl} in your navigation block, like this:

<a aria-haspopup="true" href="{collection.fullUrl}">{collection.navigationTitle}</a>

It will link to whatever URL you put in as the folders.

I also learned that, since one of my shop categories was called what I put in the URL for the folder, it redirected to that page!

I took a look at your website and it seems you were able to figure this out - can you help me out? Thanks! I am not registered as a developer so I don't think the code in the comment below me will work. Did you use it or do something else?

PROBLEM - when a URL is inserted on a folder - this will work functionally on desktop mode - because the hover drop down menu is retained - but there is no hover on Mobile, therefore you can't see what's inside the folder.!

Is there a way to have the folder's drop down menu be perma/automatically activated on mobile platforms?

For all those who have asked this question, this is how I solved this for me:

on the folder configuration in the navigation title I put:

<a href="http://yoursite.com/page">folder name</a>

Then the page I linked to, I put within the sub-menu of the folder; so, when a user clicks on the folder it goes to the first page of the sub-menu while still displaying the entire sub-menu of that folder.

Here's a screenshot that shows how this setup looks:

Let's say you have a folder called "PETS" and inside it, you have two links to "CATS" and "DOGS". You want the PETS folder to link to a page about Cats and Dogs.

The easiest solution that will work on both Desktop and Mobile is to make a third link inside your folder and set it as the first link. For example:

PETS contains the links 1. CATS and DOGS, 2. CATS, 3. DOGS

On Desktops, hovering over the folder PETS will dropdown the three links. Clicking on PETS will navigate to the first link inside the folder, which is CATS and DOGS.

On Mobile, clicking PETS will open the folder. Clicking PETS again will close the folder. Clicking "CATS and DOGS" will take you ...you know where it will take you.

So, just make another link that will take users to where you want the folder to take them, and place that at the top of your folder's navigation.

I did the same thing at http://MicroMarketplace.org but it's messing up the spacing in the menu. I'm using the Five template. On the desktop view there is a whitespace to the left of the linked menu item, and in mobile view the + (indicating expand this menu) is on the line above the actual menu item.

Any suggestions would be welcome!

Any idea how to get this to work in the Bedford theme?

I'm using the Bedford theme, and it doesn't seem to work. Any suggestions?

Great! Worked perfectly. Just changed "http://yoursite.com/page" to the page I wanted (the first page in the folder) and the "folder name" to my original folder name

Hi there, I did this and it worked perfectly, except it added a few spaces in front of the page name in the nav menu.

Before it showed: Home / Services / About

I linked to the 'Services' page using the instructions above and now it is showing as: Home/ Services / About

Any ideas for fixing this?

The spacing of the text box made my issue a little unclear. It is showing as "Home / [approx 3 extra spaces] Services / About"

On squarespace 7, when you click the folder it will take you to the first "page" inside it.

In my case, I wanted to have a Folder that when clicked will take me to a page as the answer above, "Dogs and Cats" and still show the individial pages for "Dogs" and "Cats",,

so my workaround was to create the three pages inside the folder,1- Dogs and Cats2- Dogs3- Cats

and them add a custom css code to stop displaying the first link "Dogs and Cats", so virtually making the folder name the link to the "Dogs and Cats" page.

I am using the pacific template, and the code below worked for me.

#mainNavigation > div.folder > div > div:nth-child(1){
 display:none;
}

hope this helps.

Hi there... I would actually like to do the complete opposite.I want to make the parent page un-clickable and simply display the drop-down menu.Especially for cursor-less navigtation on mobile devices.

Any suggestions? @pguerreroxThanks

I'm experiencing two major problems:1) In the Avenue template clicking on the folder title does nothing.2) Adding the a href link creates extra space in Internet Explorer (which the vast majority of my site users use. This causes the links using this to be on a separate line below the rest of the navigation. Does anyone have a solution to either of these?