How Do I Hide the Logo on One Page in Squarespace?

Written By

Hiding the logo on just one page of your Squarespace website involves using a bit of custom CSS to target that specific page. Here’s a step-by-step guide to help you achieve this:

Step 1: Identify the Page's Unique Identifier

Squarespace assigns a unique identifier to each page. You need to find this identifier to apply CSS specifically to that page.

  1. Log In to Squarespace: Go to your Squarespace website and log in to your account.
  2. Navigate to the Page: Go to the page where you want to hide the logo.
  3. Edit the Page:
    • Hover over the page, and click the "Edit" button.
    • Click on the URL slug or note the URL at the top which may look like /page-name.
  4. Find the Page ID:
    • Use the browser’s Developers Tools.
    • Right-click on the page and select “Inspect” or press Ctrl+Shift+I (or Cmd+Opt+I on Mac).
    • Look for a <body> tag. It usually contains a class that looks something like page-id-xxxxxxxxx, where xxxxxxxxx is the unique identifier.

Step 2: Add Custom CSS

Once you’ve identified the unique page identifier, you can now add some custom CSS to hide the logo for that specific page.

  1. Go to Design Mode:
    • From the home menu, navigate to Design > Custom CSS.
  2. Enter the CSS Code:
    • Below is an example of how your custom CSS might look. Replace xxxxxxxxx with the page ID you located earlier. css .page-id-xxxxxxxxx .Header-branding { display: none; }

  3. Note: .Header-branding is a commonly used class in Squarespace templates to represent the logo area. If this doesn't work, Inspect the logo area in your template to find the correct class.

  4. Save Your Changes:

  5. Click Save to apply the CSS.

Considerations and Limitations:

  • Template-Specific Classes: While .Header-branding is a common class, your template might use a different class name for the logo container. Use the browser’s Inspect tool to find the exact class used by your template.
  • Code Injection: If you’re using custom code injection (under Settings > Advanced > Code Injection), ensure this doesn’t conflict with any other custom code you have added, especially if using site-wide CSS.
  • Responsiveness: Ensure any additional CSS you add does not affect the site's responsiveness or visual integrity on different devices.
  • Access: Custom CSS only works if you have access to the website’s admin panel and proper rights to make changes.

By following these steps, you should successfully hide the logo on a specific page of your Squarespace site without impacting other pages. Always preview and test the changes to ensure everything looks as expected.

Previous

How Do I Hide My Site Title on Squarespace?
Next

How Do I Host an Online Course on Squarespace?