Jump to content

Hiding the first page in a folder - Workaround

Go to solution Solved by ahmednadar,

Recommended Posts

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

Edited by Dave Valler
Link to comment
  • 1 month later...
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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!

Link to comment

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

Link to comment
  • 1 year later...
  • Solution

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

Link to comment
  • 9 months later...
  • 1 year later...
  • 1 year later...
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:


About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.