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

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!

Edited by justin1024
Link to comment

Recommended Posts

  • 7

Here's one way to solve this:

  1. Open the folder's settings/configuration window (click its gear icon in the Pages panel).
  2. In the Navigation Title field, paste in:
    <a href="/PAGESLUG">NAME</a>

  3. Replace PAGESLUG with the slug for the page you want to link to. (Make sure the / is included.)
  4. Replace NAME with what you want the folder's nav link to say.

So for example, if you want the navigation link for your About folder to link to the first page in the folder, which has the page slug /contact-page, it would look like this:

alt text

I've done some testing and this works in most template families but not Aviator, Bedford, or Pacific.

In some templates it works but interferes a bit with the folder functionality. For example, in Skye the folder is collapsed, and you have to click the folder to see the pages. With this modification, people can still click the + icon to see the sub-pages, but if people just click the folder link they'll never see the the folder menu. For the same reason it might not work on mobile in some templates. Personally I'd only use this in templates where you can see the menu on hover, or the menu is permanently expanded. There's a guide that shows folder behavior by template here.


Edited by JGutierrez
Initial Revision
Link to comment
  • 9

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!

Edited by bobvonelgg
Link to comment
  • 3

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:



Edited by dwall
Link to comment
  • 2

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!

Link to comment
  • 2

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){

hope this helps.

Link to comment
  • 1

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

Link to comment
  • 1

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?

Link to comment
  • 0

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!

Edited by monica
Link to comment
  • 0

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.

Link to comment
  • 0

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.

Link to comment
  • 0

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.

Link to comment
  • 0

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!

Edited by Guest
Link to comment
  • 0

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?

Link to comment
  • 0

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.

Link to comment
  • 0

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!

Link to comment
  • 0

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?

Link to comment
This topic is now closed to further replies.
  • Create New...