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

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

Question

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

Share this post


Link to post

Recommended Posts

  • 6

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.

screen-shot-2018-04-05-at-21446-pm.png.9d9072836fcf29d6baf407e121339cb5.png

Edited by danieljs
Initial Revision

Share this post


Link to post
  • 8

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

Share this post


Link to post
  • 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:

screenshot

folder-screen.png.791b03476bee52854a709b93b57f24c6.png

Edited by dwall

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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){
 display:none;
}

hope this helps.

Share this post


Link to post
  • 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..

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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 yoboseiyo

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...