How to Troubleshoot Glitches on Your Squarespace Website

I hope that you never run into the problem that recently rendered my top navigation links of my website un-clickable. It was a glitch that completely took me by surprise and even the Squarespace support could not solve it.

But after looking throughly at how I had things set up, I figured it out and fixed it. And today, I want to share it with you. I want to share it with you so that you can learn from this mishap and even if you never experience this particular problem, you will know how to think about solving your website problems on Squarespace.

Watch the video below to see the top navigation acting up and how I fixed it.

The Mysterious Problem: Top navigation links were un-clickable

So a couple weeks ago, I was updating my site with a new blog post and realized that the top navigation pages were functioning in a weird manner. When I hovered over each of them (see video as I recorded how it was acting) it was not clickable. I needed to hover slightly above or slightly below the links and then it would work. The interesting thing was that the secondary navigation page (Workshop in yellow button) was working fine.

I won’t go into the whole process of how I figured it out (the process included confusion, frustration, impatience, slight panic and removing every bit of code I had on my site to find out where the glitch was rooted).

But I must give appreciation to one of my Squarespace Authorized Trainer colleagues who pointed out that the secondary navigation was overlapping the primary navigation pages. He suggested some code to fix it, if all else failed.

I didn’t want to have to use code to fix a problem that shouldn’t have been there in the first place. I want to use code in scenarios where I want to create an effect to add to the visual aesthetic of the site or correct how something looks on mobile. However, the top navigation links should work by themselves!!

Well, I noted my colleague’s point carefully and kept his suggestion in mind as a last resort.

What You See Is What You Get?

To cut to the chase, I found out that my settings in the Site Style panel were affecting how my navigation links were working. It was the Link Spacing under HEADER: SECONDARY NAVIGATION that was at a crazy high number. As soon as I reduced the number down to 42, everything went back to normal!

So, it turns out that when adjusting the Site Style settings, I had played around with the Link Spacing. But I didn’t see any change visually right away and so I simply moved on. I did that because Squarespace is a WYSIWYG website builder. What this means is: What You See Is What You Get and any changes I make from Site Styles panel is usually visible right away. But for some reason, it was not working like that in this case.

This goes to show that What You See Is NOT ALWAYS What You Get!

The Solution: Looking carefully at Site Styles Panel

Sometimes, glitches like this can happen. And the remedy is to take a deep breath, go back to your settings and see which element is not showing a change and know that sometimes even when you don’t see a change in your Site Content Area while adjusting things in the Site Styles panel, things are actually happening. (Watch the quick video to see all of this demonstrated).

Well, my friends, I hope that you will take this message with you when designing your website on Squarespace. In the rare case you run into an issue like this, look at the Site Styles panel more carefully.

Let me know in the comments your thoughts on this and if you’ve run into an issue that doesn’t make sense. I’d be happy to have a conversation and guide you in the right direction.

Squarespace is a real fun platform to host your site on. And I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me.

Remember to drop your comments in the comments section below!

~Peace,

Sophia