How can I remove the header + nav + footer from a Rover/Brine template *index* page?

Hi Squarespace community,

I've gone through the forums and tried the responses to many similar questions, but they are not working for my template (Rover, a derivative of Brine). I'm trying to build a sales page, so I need just this one index page to be header- and footer-free.

The most common suggestion is to do something like:

<style>
#header, #footer, #preFooter, #MainNavigation { display: none !important; }
</style>

This works on templates like Pacific, but not on my template.

For example, when I call

#header { display: none; }

on a Rover index page, it turns off the segment of the Index page that's named Header, instead of turning off my website's header. I'm happy to rename the segment to something else, but it doesn't make a difference. I have no segments named Footer, for example, and

#footer { display: none; }

doesn't change a thing.

I've also tried to specifically call the Index page's collection-id (which I believe is: 576833e346c3c4e74c54887c), but this doesn't do anything, either.

I have tried adding the CSS to both the Custom CSS box and the Inject Code box on the main Index page, as well as trying to add it to every segment of the Index page. No luck.

The URL is http://www.createalchemy.com/kill-the-chaos

Any ideas? Thanks so much for your time!

Holly O.

Through some trial and error, I found another solution and learned 2 things:

1 - Squaresapce doesn't use the same class/selector IDs for all templates -- not sure why this surprises me, but it does.

2 - when you have a CSS class with a space in it (as some of my template's classes do, then you have to call both words in the class separately. e.g., my footer nav's class was "footer-nav clear" but I had to {display: none;} for both .footer-nav and .clear.

(put in Inject Code on the main Index page)

<style>
#footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
display: none !important;
} 
.sqs-announcement-bar-custom-location {
display: none !important;
}
.Header, .Header--top {
display: none !important;
}
.Header-inner, .Header-inner--bottom; {
display: none !important;
}

.Header-inner, .Header-inner--bottom {
display: none !important;
}
.Footer-inner, .clear {
display: none !important;
}
</style>

this worked perfectly for Sofia Template also.

Hey @hollyo ......

After searching high and very low (LOL) I found this code and it FREAKING ROCKS! I tried so many and was about to give up, not really dramatic affect only when I came across your code.

This works BEAUTIFULLY on the CLAY TEMPLATE!

Now I can create landing pages to my hearts content. Party over here......

Thanks again! xoMaria

This is great, but I am finding that when I click to another page on the site, the headers remain hidden.

If I reload that page, the headers reappear.

Any ideas why I would be seeing that (using Basil template - part of Brine family)

Matt

I'm having the same issue, headers remain on other pages until refreshing... any luck MrFrog?

Hey @hollyo

Brine uses different IDs and Classes than other templates.

In the Case of the header and footer it uses classes. You can simplify your code down a bit with just:

<style>
   .Header, .Footer{
   display:none !important;
   }
</style>

With the style tags it is designed to go into individual per page Code Injection

@MrFrog @lanabe try disabling ajax loading if your site appears correctly after reloading the page.

Hope that helps :)

that worked, with disabling ajax loading, thanks a million @DMK

@DMK what about mobile? any tips to remove from some page in mobile?

Sure @lanabe , the footer is the same on mobile, but add in a .Mobile-bar for the mobile header:

 <style>
    .Header, .Footer, .Mobile-bar{
    display:none !important;
    }
</style>

Hope that helps

This worked great, thank you!!!!**Although one thing to note: you need to add the code to the primary index "container" settings. (In the Pages pane, click the gear on the top level of the index page.) It seems obvious now but I was trying to add the code from within the different sections where the settings of the index container aren't accessible.

I tried this on my brine template on an index page and the footer is still showing :/ Any other suggestions or maybe something im missing?

On 9/18/2016 at 8:46 PM, hollyo said:

Through some trial and error, I found another solution and learned 2 things:

1 - Squaresapce doesn't use the same class/selector IDs for all templates -- not sure why this surprises me, but it does.

2 - when you have a CSS class with a space in it (as some of my template's classes do, then you have to call both words in the class separately. e.g., my footer nav's class was "footer-nav clear" but I had to {display: none;} for both .footer-nav and .clear.

(put in Inject Code on the main Index page)

<style>
#footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
display: none !important;
} 
.sqs-announcement-bar-custom-location {
display: none !important;
}
.Header, .Header--top {
display: none !important;
}
.Header-inner, .Header-inner--bottom; {
display: none !important;
}

.Header-inner, .Header-inner--bottom {
display: none !important;
}
.Footer-inner, .clear {
display: none !important;
}
</style>

I used this code on a Brine template and on the index page I used it on, it removed a grid gallery on one of the pages. Can't figure out why else other than the code since it disappeared after entering it into the index header. Any suggestions?

 

On 6/11/2018 at 6:38 AM, dimsk said:

Hey @hollyo

Brine uses different IDs and Classes than other templates.

In the Case of the header and footer it uses classes. You can simplify your code down a bit with just:

<style>
   .Header, .Footer{
   display:none !important;
   }
</style>

 

Thank you for this! If anyone was having issues with the first code removing grid galleries from your index page, this code did not! My grid galleries were returned to the page when I copied this into the index code injection rather than the first reply.