Remove Click Event on Dropdown folder, but not Children — — A Squarespace helper guide

**You don’t have to be a developer to understand this post. I will try to make this as easy to understand as possible.

A common question I have seen on Squarespace forums involves disabling the navigation folder click event. Some templates (like Farro) make it so that if you click on a dropdown menu (in the case below“localizaciones”) it will take you to the first item in the dropdown (in this case “Bilbao”). This can be frustrating if you don’t want it to send you to the first item…or necessarily do anything other than show you the options below when you hover over it.

The easiest answer to this problem was with some custom css. Don’t be afraid, I’ll show you step by step how to do this. First of all, if you’re using the Farro template, all you have to do is go to Home/Settings/Advanced/Code Injection /Header (click home, then click, settings, then click code injection, then put the code below in header):

<style>
.Header-nav-item--folder a {
pointer-events: none;
}

.Header-nav-folder-item {
pointer-events: auto !important;
}
</style>

** Please note that the .Header-nav..blah..blah may be different for you!

This worked for the Farro template, but the names of your folders the items in the folders may be different. So how can you find the names of your folder and the items in it? Time for Google Chrome Inspector!!!!!

Step 1: Go to your squarespace site and look at it in full screen mode.

step 2: Put your mouse over the navigation folder you want to disable the clicks on. For me this was “LOCALIZACIONES”

Which, when you hover over, looks like this:

Step 3: Right click the folder (“localizaciones”) and you should see an option for “inspect”. Click the inspect option.

Step 4: Don’t be alarmed, you’re supposed to see your screen split in half :)

Step 5: Since you right clicked the folder you want to disable, the white screen on the right will highlight that section of the html within the page’s code.

Step 6: You’ll notice here that the class=“Header-nav-item Header-nav-item--folder” is almost identical to the first part of the CSS we added to your sites header. I just used the last part of the class name “Header-nav-item--folder” and added a: space “a” (the “a” stands for <a> anchor tag…which is a link to something else. Add this space “a” after the last part of your class name when you put in your code.)

<style>
.Header-nav-item--folder a {
pointer-events: none;
}


.Header-nav-folder-item {
pointer-events: auto !important;
}
</style>

Step 7: You can test this out to see if you’ve selected the correct class. Go to Home/Setting/Advanced/Code Injection and add:

<style>
.Your-class-name-here a {
pointer-events: none;
}
</style>

to the header section. Save it and then go to your home page. Refresh the page and see if you can click on the folder. You shouldn’t be able to. In fact, the hover should be disabled too, so you wont see any of the dropdown options.

Step 8: Don’t panic! You can always remove this code and save it again without it and everything will be back to normal.

Step 9: Go back to your home page and right click on the dropdown folder again….then select “inspect” again.

Step 10: You should see the same html:

Step 11: Click the arrow on the left hand side of your highlighted section to see the items inside your dropdown (You may have to click a few arrows on the left to see the items inside this dropdown…which are the things you still want to be able to click on.)

Step 12: You will notice that all the items in my folder (bilbao, formentera, barcelona) have the same class: “Header-nav-folder-item”

<style>
.Header-nav-item--folder a {
pointer-events: none;
}

.Header-nav-folder-item {
pointer-events: auto !important;
}
</style>

Which we used in the code before.

Step 13: Now that you have found your class names we are ready to customize your nav bar! Just replace your class names (plus the space a for the folder that holds all the items) for the ones I have used above. Remember to put a ( . ) before the class name (it tells css that the name you are giving it is a class and not something else).

Step 14: Save your changes in Settings/Advanced/Code Injection/ header section

Step 15: Go to your home page and refresh. You should be able to hover over the dropdown and see you items. You shouldn’t be able to click on the dropdown…just the items in the dropdown.

Step 16: If this didn’t work, keep trying different class name combinations that you can find with google chrome inspect (like before).

Hope this helps!

*You can find more of my squarespace answers here!

*For more information about pointer-events you can check it out at MDN.

Like what you read? Give Jamie MacKillop a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.