Buy me a coffee

Squarespace: Remove Underline

In this post, I will share some CSS to Add & Remove Underline from Links in Squarespace 7.1.

CSS – Remove Underline from Links

Add this code to Home > Design > Custom CSS

/* Squarespace 7.1 - Remove Underline */
a {
    background-image: none !important;
}

If you use Squarespace 7.0, try this code

/* Squarespace 7.0 Remove Underline */
a:not(.btn) {
    background-image: none !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

Remove Navigation Links Underline

If you just want to remove underline on Navigation Links, add this to Home > Design > Custom CSS

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}

Remove Footer Links Underline

If you just want to remove underline on Footer Links, add this to Home > Design > Custom CSS

/* SS 7.1 - Footer underline */
footer#footer-sections a {
    background-image: none !important;
}

Remove Body Links Underline

Add this to Home > Design > Custom CSS

#page .sqs-block-html a {
    background-image: none !important;
}

CSS – Change Underline Color

/* Footer underline */
footer#footer-sections a {
    background-image: linear-gradient(to right, red 100%, green);
}
/* Body underline */
#page a {
    background-image: linear-gradient(to right, red 100%, green);
}
/* Header underline */
header#header a:not(.btn) {
    background-image: linear-gradient(to right, red 100%, green);
}

 

3 thoughts on “Squarespace: Remove Underline”

Leave a Reply to Tuan Phan Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder