Video Guide for adding and Sizing Logos in Squarespace 7.0 and 7.1
For a step-by-step walkthrough on adding logos and adjusting logo size in Squarespace, this video covers the basics in both 7.0 templates and 7.1 templates. For Squarespace 7.0, there are detailed steps plus a pro tip in the text below.
↓ For Squarespace 7.1, there is custom code at the end of this post.
How to Increase your Logo Size on Squarespace 7.0
When you first upload your logo to Squarespace, depending on your template, it might look ridiculously tiny. (This happens frequently with the Rally template.) You can use these same steps to increase your logo size in most Squarespace templates. To make your logo bigger, just follow these simple steps:
Please note: this works for most templates on Squrespace 7.0. If you are working in 7.1, see the video above for exact steps. If you are looking to make your logo bigger on a Cover Page, I have a separate post with that solution.
Step 1. Navigate to Design > Site Styles
In the Site Styles menu, you’ll scroll down and look for something called HEADER:BRANDING Logo Width (or NAVIGATION Logo Height, or something similar depending on your template).
Shortcut: once you are in the Site Styles section, you can click on your logo and it will bring up just the styles associated with that.
In this example, I’m using the Rally templates.
Here you can see that the default width is 60px. Much too small.
Step 2. Drag the Logo size slider to the right
Next, you’ll simply drag the slider to the right to increase logo size until you are happy with the result.
In Brine family templates, this tops out at 320px, but the maximum size varies by Squarespace family template, and some use height rather than width in Site Styles.
PRO TIP: You can type over the 320 with a larger number and save. Voila, your logo is bigger. This works in Brine family templates and many others.
Optional: Check your Logo File for Extra Space
Still not happy? Next, check that your logo file is cropped appropriately. If you’re on a Mac, open your logo file in Preview. If it has extra space to the left and right like this, you’ll want to crop it.
You can crop directly in Preview by dragging around the area you want to keep:
Then click Command-K to crop.
Now that your logo file has less empty space on the sides, you can go back in Site Styles and adjust the size shown on your website.
How to Increase your Logo Size on Squarespace 7.1
If the maximum logo size following the steps in the video above is still too small, you can add code to Design > Custom CSS to increase the logo size even more. Adjust the max-height value until you get the look you want:
/* increase logo size */
.header-title-logo img {
max-height: 250px;
}
