Hiding the first page in a folder - Workaround

Hi all,

I wanted to share a workaround for hiding the first page in a folder.

Since sometime in SS7 they have finally made a folder 'clickable' and automatically link to the first page inside the folder. However (as many of my clients have requested) this is not really what anyone wants because it means your folder name and first page go to the same place - an unnecessary duplication.

If you hide your first page in the Not Linked section, the main folder just links to the first visible page again.

What you REALLY want is to specify where your folder links to, and then hide that page in the Not Linked section so it doesn't appear inside the folder.

However SS doesn't supply a way to custom link the folder and after much searching and trying lots of people's code to link it using Javascript, I really couldn't make this work.

The easier way is to use CSS to hide an item in the folder, however I discovered when I hid the first item in the list, it hid the entire subnav. It seems as if the folder name and the first page are tied together in some way that prevents you applying any CSS to the first item in a folder without affecting the whole folder.

So my very clunky workaround is this.

1) Add this code to your custom CSS editor (will hide the second item in your folder list)

.subnav :nth-child(2) {display: none !important;}

You may need to change the '.subnav' depending on your template. I'm using Hayden.

2) Create a new page and make it a 'Link' and drag it inside your folder to the top position

3) Make the link name BLANK by just hitting spacebar once

4) Link that to your 2nd page in the folder

You should now have folder that expands to show all your pages except the second page, (which was your original first page). In it's place is a blank link that goes to the same place as the main folder name when clicked.

So technically there is still a first page, but visually It creates a blank space at the top of your menu, effectively increasing the clickable area of your menu link. You can possibly explain that away as a design choice and it evens looks a little bit deliberate on mobile.

If anyone has a way to do this properly, please let me know. In the meantime I hope this helps someone!

Good luck!Dave

Thank you for this tip! It worked perfectly for me on my laptop, but it didn't work on my phone. On the phone, i was able to press the drop down menu to expand it to see the second link, but it wouldn't let me click on the "folder" itself to go to the first link.

Is there any way to fix this with mobile CSS?

Thanks!

Thank you for this tip! It worked perfectly for me on my laptop, but it didn't work on my phone. On the phone, i was able to press the drop down menu to expand it to see the second link, but it wouldn't let me click on the "folder" itself to go to the first link.

Is there any way to fix this with mobile CSS?

Thanks!

Hi @webgal

I'm afraid I didn't work out a method for mobile. I have the same issue and am just living with it.

My client wanted 'overview' pages for the items in my folders, which basically are pages with links to the other pages in the folder. So I figured that on mobile the user wasn't missing much as all the correct pages are there, but they just can't access the overview page. With the folder item not 'clickable' on mobile it's like the overview page doesn't exist so in some ways it's ok.

If you find a solution though, please post it here. :)

Many thanksDave

Thanks for getting back to me Dave! Unfortunately, this won't work for my client. But what I'm thinking is that we can rename the drop down folder itself something different than the first page, and just settle on the fact that clicking on the folder itself and clicking on the first page within the navigational menu will take the viewer to the same page.

I personally use the adirondack template, and this issue doesn't come up there with the drop down menu, which is nice!

Ah cool, thanks for the tip about Adirondack, I didn't know the folders behaved differently there.

What you mentioned with naming the folder is actually what I did first, thinking it would be ok. But it was flagged up by my client, they actually wrote in feedback "The page should not appear in the menu list a second time "

I think it completely depends on who you are, some people wont notice or mind, but you know what it's like with clients!

(NB on this thread your first comment seemed to get posted twice so if you get a chance, delete that second one so it doesn't get in the way. :)

Hi all, thanks to Dave Valler, provide first/desktop solution.

The code below helps you hide first child/first page of the drop-down list under a folder. This first child/first page is what will open when the user clicks on the folder name.

Desktop solution:

 .subnav :nth-child(1){display: none;}

Mobile soltion:

#mobileNavWrapper .subnav :nth-child(1){display: none;}

All the best and happy coding :)

Hi @Dave Valler . I am using Keene template and cannot get your method to work :( I have gone through it but comes up with an error. Any ideas? Thanks!! :)

Please see this. Its a simple fix for the problem stated.

Hi there, I have exactly the same issue but I am using Squarespace 7.1

Does anyone have any updated tips on how to do this as the code above doesn't seem to be working? 

Thanks!

3 hours ago, greenlucy123 said:

I have exactly the same issue but I am using Squarespace 7.1

The solutions above predate 7.1. You'll find a solution in another thread, here: