Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
hollyo

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

Question

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.

Edited by hollyo
Initial Revision

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 2

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>


Share this post


Link to post
  • 1

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 :)

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
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?

 

 

Share this post


Link to post
  • 0
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. 

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...