SquareSpace Site Navigation Drop Down: clickable, or not clickable?

Drop down menus are a great way to organize your content, in order to have a clear, simple main navigation bar.

In my experience, I have had experience with both types of clients: the ones who want the main folder of their SquareSpace site navigation clickable with a redirect to a landing page (usually a summary landing page in which there will be links to the sub menu pages), and the clients that do NOT want to have the folder clickable. By default, Squarespace makes the drop down folder clickable. Why? I have no idea! All I know is that it is not the best user experience so my preference is always to remove the link, unless you are redirected to a relevant landing page on click.

How to make your drop down navigation folder NOT clickable:

In your squarespace editor menu, click Design > Custom CSS

Then copy & paste this code in the css editor:

/* Navigation folder NOT clickable */
.header-nav-folder-title {
  pointer-events: none;
}

And SAVE!

How to add a link to your drop down navigation folder (and link to an existing landing page):

1. Create the landing page you want to redirect and place it in the NOT LINKED section. You will need the url slug for the piece of code that will be added to your site. For this demo, the url slug of the page I want the folder link to redirect to is /main-service-page

2. You will also need the url slug of the main folder. In my example, the folder slug is /main-folder

3. In your squarespace editor menu, click Home > Settings > Advanced > Code Injection > Footer

Then copy & paste this code in the code editor (you will need to edit the links with your own website links otherwise this won’t work):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
    $('.header-nav-folder-title[href="/main-folder"]').click(function() {
        window.location = "/main-service-page";
    });
});
</script>

Save, and… Voila!

---

You might also be interested in this!