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

How do you make a dropdown navigation folder clickable?


jasonbarone

Question

I'd like to place a few Categories into a folder, and have the Main Link (the Folder itself) actually link to a Category too.

How is that possible?

Example:

alt text

I need the Folder Link (Decorate) to actually take people to the Category for Decorate so I don't have to list it inside of the Folder.

So basically my question is how do I turn the Folder Link into an actual link? I saw your other thread about this but it doesn't work if the links are External Links, which these are...

Thanks!

Edited by jasonbarone
reworded question

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • Answers 37
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I went looking for this earlier, and put it through usability testing on mobile. It's problematic on touch devices (iPad/tablets), simply because you can't get the folder open on mouse-over. The way t

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 t

Recommended Posts

  • 0

@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

Edited by Jonsolotravels
Initial Revision
Link to post
  • 0

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.

Link to post
  • 0

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.

Link to post
  • 0

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!

Link to post
  • 0

 

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?

Link to post
  • 0

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. 

Edited by derricksrandomviews
Link to post
  • 0
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/

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...