How to Remove Link and Navigation Underlines for Squarespace 7.1 Website - Custom Css Code
Squarespace is seriously the most SLEEK website template platform, however there are a few “default” design choices you may want to change, including removing link and navigation underlines.
Underlines (and hey, bright blue text) is a universal indicator of when a text is a link, however sometimes it may make the design a little bit busier, and may not be needed when it’s obvious it’s a link (example, navigation items).
Here’s a few of our favourite css code snippets to add in (for mostly Squarespace 7.1, but we’ll specify some Squarespace 7.0 tips too), even if you’re overwhelmed with custom code, trust us it’s fairly easy!
Let’s dive in to making changes to your website’s site styles!
Where can you add custom code into your Squarespace website?
Squarespace makes it super easy to add in custom code into your website. From the main dashboard, under the WEBSITE tab, scroll all the way to the bottom > WEBSITE TOOLS > CUSTOM CSS. You can also use the search function and type “custom css” or “css”. Here’s more info on customizing css.
When adding in code, we suggest adding it to the bottom, and you will be notified if there is an error and you can “CANCEL” changes before saving.
Allow us to show you below:
Remove Underline Links in Footer for Squarespace 7.1
Below is the code to remove any underline links found in your footer.
// remove underline links in footer //
footer .sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}
Remove Underline Links Throughout Entire Website (or Section) for Squarespace 7.1
Below is the code to remove any underline links throughout your website.
// remove underline links throughout website //
.sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}Below is the code to remove any underline links for a specific section. You will want to install the chrome plugin (Squarespace ID Finder) to grab the specific section block ID.
// remove underline links for section //
#SPECIFIC-COLLECTION-ID-HERE .sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}EXAMPLE
// remove underline links for section //
#SPECIFIC-COLLECTION-ID-HERE .sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}How to remove underline links for Squarespace 7.0?
// remove underline links for footer //
.Footer-inner a, .Footer-blocks h1 a, .Footer-blocks h2 a, .Footer-blocks h3 a
{border-bottom: none;}// remove underline links //
a {
border-bottom: 0px !important;
}Feel free to also specify certain headers (like H1 a) instead, and also specific sections, which you can grab as the page url in Squarespace 7.0. For example:
// remove underline heading 1 links for specific section //
#about-top h1 a {
border-bottom: 0px !important;
}
Remove Underline Links for Active Menu Navigation for Squarespace 7.1
Below is the code to remove any underline links for your menu navigation.
// remove underline active menu item //
.header-nav-item--active a {
background-image: none !important;
}Looking to remove the underline link for an active menu navigation for the mobile menu for Squarespace 7.1?
// remove underline active menu item mobile menu //
.header-menu-nav-item-content {
background-image: none !important;
}Luckily, Squarespace 7.0 didn’t have this feature, so no need for custom code! Keep us in the loop if you have any questions or if any of the code no longer works (Squarespace occasionally changes their code), so send us a message!
Looking to get your website launched ASAP?
Our Squarespace website templates may be the right fit for you! Our DIY option allows you to play and plug your content and get you launched pronto!
more posts like this!
