Hide header, footer and banner on single page Squarespace 7.0

Site URL: http://pilgrimsoul.com

Looking for code injection to hide the header, footer and banner from a single page using Squarespace 7.0. I found code that works in removing the header and footer, but the banner remains.

This is what I'm currently using to remove the header and footer: <style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>

Anyone know how to remove the banner too from a single page? The page I'm working on isn't yet enabled, but you can see the attached screenshot and the homepage URL if that helps. 

Try the following.

.sqs-announcement-bar {

  display: none;
  
  }

Let us know how it goes.

@creedon that worked! Thank you so much! 

may I ask where this code is injected for single page use?

@jonkam01

If you are on the business plan or above you could put it on a single page by wrapping the code in a style tag. Then add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  .sqs-announcement-bar {
  
    display : none;
    
    }
    
  <style>

Alternately it could be added to Design > Custom CSS. Something like the following but you would need to identify the page collection id for your page.

#collection-5f45b7ef6228fc1bee359e60 .sqs-announcement-bar {

  display: none;
  
  }

@paul2009 has an article covering elements of this topic. See How to apply CSS to one Squarespace page.

Let us know how it goes.

Hi there, @creedon !

I just tried your code to hopefully help turn off the footer on my homepage via Design > Custom CSS. But, I think I must have something wrong because it is not working for me. Would you mind checking my work? 

#collection-60f6fab72a6ff25e75eac22d .sqs-footer { 

display: none; 

}

The collection # is for my homepage.

Thank you!
-Makenna

@makennaokeeffe

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Oops! Sorry I forgot to include the URL. Here it is: 

https://www.aliciadudziak.com/

Thanks for offering to help! 🙂

@makennaokeeffe

Replace your CSS with the following.

.homepage #footer-sections {

  display : none;
  
  }

This is for a v7.1 site.

Let us know how it goes.

@creedon That worked perfectly! Thank you so much! 🙂

On 8/16/2021 at 10:15 PM, creedon said:

@makennaokeeffe

Replace your CSS with the following.

.homepage #footer-sections {

  display : none;
  
  }

This is for a v7.1 site.

Let us know how it goes.

Hi, I'm using the ready template 7.0 and want to have a small footer or none at all https://nectarine-megalodon-zrnb.squarespace.com

@MoonMama

Do you want to hide the footer site wide?

12 hours ago, creedon said:

@MoonMama

Do you want to hide the footer site wide?

Yes please.

On 2/25/2022 at 9:12 AM, MoonMama said:

Yes please.

Add the following to Design > Custom CSS.

#footer {

  display : none;
  
  }

This is for v7.0 using the Skye template family.

Let us know how it goes.

11 hours ago, creedon said:

Add the following to Design > Custom CSS.

#footer {

  display : none;
  
  }

This is for v7.0 using the Skye template family.

Let us know how it goes.

Thank you!

On 2/26/2022 at 2:26 PM, creedon said:

Add the following to Design > Custom CSS.

#footer {

  display : none;
  
  }

This is for v7.0 using the Skye template family.

Let us know how it goes.

@creedonTrying to hide banner and title in one page, but it is not working 7.0.  I used the following code, any idea? Template Alex & Sonny. This page: https://www.industracom.com/careers

<style>
#banner-area-wrapper {display: none}
</style>

8 hours ago, HunterD said:

Trying to hide banner

Hiding seems problematic as there are some spacing issues. When the banner is hidden. Can you simply remove the banner for that page? SS handles the spacing issue when that is done.

I can remove the image, but it leaves a blank space. I found the code to remove it and happened exactly what you said, so I started hitting shift to give some space before the text. It worked, but it's kinda annoying to do that every single time. https://www.industracom.com/digital-marketing-lead-b2b-customer-growth