Jump to content

Here's how to make your folder link clickable using CSS only on Squarespace 7/7.1

Recommended Posts

What I Did

I created an invisible link as the first item in my dropdown and repositioned the dropdown higher to create the illusion of clicking on the folder link.

Disclaimer: I have no formal development background but took pieces of what folks suggested to make this solution. There are very helpful tutorials out there if you have access to Squarespace's Code Injection but for now, I didn't want to upgrade my account to use this. 

Step by Step

  1. Go to Pages > create the landing page that you want your folder to direct to > move this page under the Not Linked section
  2. Go to Pages > set up a Folder > click on 'Add Page' > choose 'Link' and enter the slug for your landing page > make sure the Link is the first item in your dropdown
  3. Go to Folder > add the rest of links you want in your dropdown. (This tutorial is clearer when you have this in place.)
  4. Go back to Design > go to Custom CSS
  5. Add this code to move your dropbox higher > adjust the margin-top to line up overlap your folder name
    div.header-nav-folder-content {
    	margin-top: -1.5rem;}
  6. Then add this code to make the first item in your dropdown invisible. This way, it looks like you're clicking the folder name but you're actually clicking the first link in your dropdown.
.header-nav-folder-item:first-of-type a {
	opacity: 0;}

Press save and that's it! 

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.