How to Remove the Underline From Links on Squarespace

 
desk with keyboard, coffee, notebook, and headphones

Well hey there everyone! Recently I have been learning a lot about Squarespace and all of its functionality. I’ve said it before and I’ll say it again, Squarespace has some pretty awesome organizational structure built into it. It allows me to build a site that I completely trust and forces me to be more clean and concise in my design decisions.

However, there are some functionalities about Squarespace that are just too limited. When that happens, it’s good to know we can just bibbidi boppity boo our problems away with simple code.

Here is how you can remove the underline in the links on your text!

First youre probably wondering, why would I do this? Who cares? Is it worth the extra effort?

Well…maybe not. Having an underline in your links really isn’t a big deal at all. It’s certainly not going to make or break your website, I just happen to like the clean and simplistic feel of not having an underline.

If your minimalistic tastes happen to match mine, here is some fun coding you can add to your site to easily make this change!


First: Make sure you know where to put the code

From your Squarespace website editor:

  • Click “Design”

  • Then click “Custom CSS”

You should see something like this:

 
custom CSS on Squarespace.png
 

Second: Stay organized

I always like to be really organized when I place the coding in the Custom CSS. I used to just input whatever code on any line and save it. The problem was, if something ever when wrong or I needed to make a change, it took me some time to figure out which code was causing the problem.

To any of you developers out there you’re probably saying… well duh. But for me, as a self taught designer, it wasn’t so obvious. That’s why I pass this important note along to any newbies out there.

Here’s how you name your code without affecting the website:

  • Pick a line and type //your title//

  • Then make a new line like this:

naming custom css in squarespace.png







Now to place your no underline code:

The first code I tried not only removed the underline, but also accidentally removed the underline of all my buttons too which wasn’t great (oops)! It looked liked this.

a {

border-bottom-style: none !important;

}


code that removed underline in squarespace.png
 


But this code just gets rid of the link underlines in your text!

p a{

border-bottom: none !important;

}


To insert this code:

  • Copy the text above

  • Paste it below your code title in Custom CSS like this:

Custom CSS in Squarespace.png
 


Now the underlines should be gone across your entire site! Yay!


Have any questions about this or want a custom website for your business?



 

WELCOME TO THE BLOG!

woman+sitting+in+nature+with+laptop.jpg

Hi, my name is Layne. Check out my other recent posts!