5 Must-Have Codes For Squarespace 7.1

JUNE 23, 2022

Designing a custom-made Squarespace website usually requires quite a bit of CSS code. Although Squarespace is user-friendly, sometimes there are a few elements that need to be tweaked through code that aren’t possible to change with the editor. Below is a list of codes that I use on every Squarespace website I design.

01. Add Custom Fonts

Squarespace has hundreds of built-in fonts to choose from that are easy to use within the platform. But if you already have an established brand with unique fonts that aren’t available, there’s a workaround through CSS to install any custom font.

First go to Design > Custom CSS. Then scroll down and click the Manage Custom Files button. From there you can upload any font file and paste the code below into the CSS editor. Be sure to replace the green text with your own font names and files.

// Custom fonts
@font-face {
font-family: 'FontName';
src: url('FontFileURL');
}
h1 {font-family: 'FontName'; }
h2 {font-family: 'FontName'; }
h3 {font-family: 'FontName'; }
h4 {font-family: 'FontName; }
p {font-family: 'FontName'; }

02. Edit Mobile Menu Font

To customize the colors and alignment of your mobile menu, you can use the Site Styles menu that is built into Squarespace. However, if you want to edit the font, you will need to paste the code below into the CSS editor. Make changes to the green text as needed.

// Edit mobile menu font
.header-menu-nav-item a {
font-size: 18px;
font-family: 'Font Name';
line-height: 50px;
}

03. Change Color of Navigation Links on Hover

// Change nav link hover
.header-nav-item a:hover {
color: #FFFFFF !important;
}

04. Remove Hyperlinks in Footer

// Remove footer hyperlinks
footer a {
text-decoration: none !important;
}

05. Disable Horizontal Scroll on Mobile

// Remove horizontal scroll
@media screen and (max-width:767px) {
html, body {overflow-x: hidden;}
}

For more Squarespace codes and plug-ins, visit Ghost Plugins* and use code ATRISTUDIOS for 10% your next purchase!

*Links marked with an asterisk (*) are affiliate links. These links are only for products and services that I have used myself and stand by 100%

Find this helpful?
Say thanks with a coffee 💛