Removing the logo from a specific page in Squarespace 7.1

There may be times when you want to remove the logo from a specific page on your Squarespace 7.1 website. Whether you're creating a landing page, a special campaign, or just want a minimalist design for a particular section, hiding the logo is a simple task using custom CSS.

In this tutorial, we’ll guide you through the steps to remove the logo from only one page, without affecting the rest of your site.

Table of Contents

Why Remove the Logo on a Page?

  • Create a distraction-free landing page

  • Match a specific visual layout

  • Customise promotional or thank-you pages

  • Hide branding during private previews

Complexity: Easy

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxx"] is a Chrome Extension called Squarespace ID Finder.


Step-by-Step Instructions

1. Identify the page collection you want the logo removed.

Use the chrome extension mentioned earlier. In this example the page collection id is #collection-61803842197c3a5a511e27c9

Page collection id

2. Add the CSS code to your website, with the page collection id.

Go to Pages > Custom Code > Custom CSS and add the code below.

/* remove logo */ #collection-61803842197c3a5a511e27c9 { .header-title-logo { visibility: hidden; } }
Removing logo from page

Key Takeaways

  • You can hide the logo on individual pages using CSS.

  • Use the page ID to target that page only.

  • This method doesn’t affect your logo site-wide.

  • Great for creating clean landing or promo pages.

FAQs

Can I hide the logo on multiple pages?
Yes! Just add multiple selectors like this:

#collection-123456789, #collection-987654321 {.header-title-logo { visibility: hidden; }}

Can I show a different logo instead?
Yes, with more advanced CSS or JavaScript, you can swap the logo image on specific pages.

Will this affect mobile too?
Yes, this CSS works across both desktop and mobile versions of your site.



Conclusion

Whether you're designing a custom landing page or simply want a cleaner look for a particular section of your website, removing the logo on a specific page in Squarespace 7.1 is quick and easy with custom CSS. It helps you keep the focus where it matters—on your content.


If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.


All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.

Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

Removing the navigation menu from a specific page in Squarespace 7.1

Next
Next

Changing the colour of top navigation link on hover and when active