[Share code] Hide Header/Footer (One Page)

Some code to hide Header and Footer on One Page.

You can add code to Custom CSS box. With #1, you need to add to Page Header Code Injection or Code Block.

#1. One Page

Edit page > Add a Code Block > Paste the code. Or if your plan supports Code Injection, you can add code to Page Header Code Injection

<style>
header#header {
  display: none !important;
}
footer.sections {
  display: none !important;
}
</style>

#2. Home Page Only

/* Homepage Only */
body.homepage {
  header#header, footer.sections {
  display: none;
}
}

#3. Other Page (exclude Homepage)

/* Other pages - exclude homepage */
body:not(.homepage) {
  header#header, footer.sections {
  display: none;
}
}

#4. Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header, footer.sections {
  display: none;
}
}

#5. Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
header#header, footer.sections {
  display: none;
}
}

#6. Blog Page (List)

/* Blog Page (list) */
[class*="type-blog"].view-list {
  header#header, footer.sections {
  display: none;
}
}

#7. Blog Post

/* Blog Post */
[class*="type-blog"].view-item {
  header#header, footer.sections {
  display: none;
}
}

#8. Event List

/* Event List */
[class*="type-event"].view-list {
  header#header, footer.sections {
  display: none;
}
}

#9. Event Detail

/* Event Detail */
[class*="type-events"].view-item {
  header#header, footer.sections {
  display: none;
}
}

#10. Shop/Category Page

/* Shop/Category */
[class*="type-products"].view-list {
  header#header, footer.sections {
  display: none;
}
}

#11. Individual Products

/* Individual Product */
[class*="type-products"].view-item {
  header#header, footer.sections {
  display: none;
}
}

#12. Cart Page

/* Cart Page */
body#cart {
  header#header, footer.sections {
  display: none;
}
}

If the code doesn't work on your site, you can share site url in comment, I will check again.

Hi @tuanphan

On my site https://www.booking.laverriere.com/  I have a new video on the page https://www.booking.laverriere.com/new-page-1 that I eventually would like as my home page and the video as a full page background.  The template is Brine 7.0. 

Any code I use to try to hide the footer and header does not seem to work.  Any ideas on how I can make the video a full page background instead of the slideshow that is currently there and retain the hamburger menu and logo?

Many thanks,
Sandra 

6 hours ago, sandracheesman said:

Hi @tuanphan

On my site https://www.booking.laverriere.com/  I have a new video on the page https://www.booking.laverriere.com/new-page-1 that I eventually would like as my home page and the video as a full page background.  The template is Brine 7.0. 

Any code I use to try to hide the footer and header does not seem to work.  Any ideas on how I can make the video a full page background instead of the slideshow that is currently there and retain the hamburger menu and logo?

Many thanks,
Sandra 

To remove Footer, use this code to New Page 1 Page Header Code Injection

<style>
  footer#footer {
    display: none;
}
</style>

With Header, you want like this?

@tuanphan Hi, yes that is exactly what I would like for a home page (full bleed video) on autoplay.  I have input the code above into the New Page 1 Page Header Code Injection, but I still see the header and footer?  

many thanks,

Sandra

@tuanphanI have sorted the footer code, it was a slight typo - thank you, but the banner is still showing.

On 4/18/2024 at 3:40 PM, sandracheesman said:

@tuanphanI have sorted the footer code, it was a slight typo - thank you, but the banner is still showing.

Can you share link to page where you have problem?

@tuanphan the same link as the subject of this message.  Thank you.

On my site https://www.booking.laverriere.com/  I have a new video on the page https://www.booking.laverriere.com/new-page-1 that I eventually would like as my home page and the video as a full page background.  The template is Brine 7.0. 

On 4/22/2024 at 3:53 PM, sandracheesman said:

@tuanphan the same link as the subject of this message.  Thank you.

On my site https://www.booking.laverriere.com/  I have a new video on the page https://www.booking.laverriere.com/new-page-1 that I eventually would like as my home page and the video as a full page background.  The template is Brine 7.0. 

You can use this code to Website > Website Tools > Custom CSS

body#collection-661ea104077f1a0d6374d932 {
& {overflow: hidden;}
main#page {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.html-block {
    display: none;
}

.video-block {
    padding: 0px !important;
}

footer#footer, #preFooter {
    display: none !important;
}
}

@tuanphan thank you so much, but unfortunately, the banner is  still showing? https://www.booking.laverriere.com/new-page-1  Also is there code to let the video autoplay - this is going to be the home page of the site.

On 4/24/2024 at 5:15 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

body#collection-661ea104077f1a0d6374d932 {
& {overflow: hidden;}
main#page {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.html-block {
    display: none;
}

.video-block {
    padding: 0px !important;
}

footer#footer, #preFooter {
    display: none !important;
}
}

 

Change to this code

body#collection-661ea104077f1a0d6374d932 {
.banner-thumbnail-wrapper {
    display: none !important;
}
& {overflow: hidden;}
main#page {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.html-block {
    display: none;
}

.video-block {
    padding: 0px !important;
}

footer#footer, #preFooter {
    display: none !important;
}
}

Autoplay: I remember when you edit Video Block, it has an option to make Autoplay, you try checking it again.

@tuanphan thank you we are getting there, but now I seem to have a huge white gap at the bottom of the page? On mobile view it is huge!

Because video height < height of mobile screen height.

If make video fill up mobile screen, it won't fullsize. If you still want this, use this code to Custom CSS

@media screen and (max-width:991px) {
body#collection-661ea104077f1a0d6374d932 {
div#block-yui_3_17_2_1_1713364865812_2322 video {height: 100vh;object-fit: cover !important;}

.sqs-native-video .native-video-player {padding: unset !important;}

.plyr__video-wrapper {
    overflow: visible !important;
}

.video-player .plyr {
    position: static !important;
}

.video-player .plyr__video-wrapper {
    z-index: 9999 !important;
}}}

@tuanphan this has worked for the mobile view thank you but not for a tablet or PC/laptop - there is still a big white bar at the bottom?

On 5/2/2024 at 2:31 PM, sandracheesman said:

@tuanphan this has worked for the mobile view thank you but not for a tablet or PC/laptop - there is still a big white bar at the bottom?

Try change 991px to 1500px

@tuanphan Hi, thank you I do get a full page at 1500px but the hamburger menu and logo disappear - I have tried all different lower sizes but then the white bar comes back?

On 5/7/2024 at 12:50 AM, sandracheesman said:

@tuanphan Hi, thank you I do get a full page at 1500px but the hamburger menu and logo disappear - I have tried all different lower sizes but then the white bar comes back?

To make burger, logo appears, use this code to Custom CSS

header#header {
    z-index: 99999999 !important;
}

@tuanphan thank you the headers now appear but when  you click the hamburger menu it does not open and the logo disappears

Use this CSS under

div#overlayNav {
    z-index: 9999999 !important;
}

Folks just a note. Squarespace now provides settings to hide headers and footers on each page for v7.1 sites. It won't cover all situations so CSS custom code is still useful in those situations but trying SS's built options is a good first stop on the way to whatever effect you are trying to create.

@tuanphan amazing thank you, we are now up and running! 

@creedon thank you, but unfortunately, this site is on a Brine template and not 7.1

2 minutes ago, sandracheesman said:

unfortunately, this site is on a Brine template and not 7.1

Thanks. I updated my post to mention the v7.1 aspect.

@tuanphan Hi again!  As above we would now like to do the same for the https://www.chenebleu.com/ site.  I have set up a new page with the video on which is https://www.chenebleu.com/home-2  and tried to utilise the CSS you gave me to use on the site above but it does not seem to work.  The first problem is the video is not full page, there is still a grey banner across the top and also when the 'shop pop-up appears when viewers first see the site, the 'X' to close it does not work.  This is the code I have used taken from the La Verriere site:

//mobile view home page video full screen//
@media screen and (max-width:1500px) {
body#collection-66850fda597a333fea48367b {
div#block-yui_3_17_2_1_1720002119170_1451 video {height: 100vh;object-fit: cover !important;}

.sqs-native-video .native-video-player {padding: unset !important;}

.plyr__video-wrapper {
    overflow: visible !important;
}

.video-player .plyr {
    position: static !important;
}

.video-player .plyr__video-wrapper {
    z-index: 9999 !important;
}}}

//header to appear on video page//
header#header {
    z-index: 99999999 !important;
}
//show menu on video home page//
div#overlayNav {
    z-index: 9999999 !important;
}

/* Fullwidth video homepage */
body#collection-66850fda597a333fea48367b {
.banner-thumbnail-wrapper {
    display: none !important;
}
& {overflow: hidden;}
main#page {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.html-block {
    display: none;
}

.video-block {
    padding: 0px !important;
}

footer#footer, #preFooter {
    display: none !important;
}
}

Can you advise how I amend this to work as https://www.booking.laverriere.com/ now does (although there is a slight lag before it begins - is there a way to correct this?  Many thanks.  Sandra 

On 7/3/2024 at 6:03 PM, sandracheesman said:

@tuanphan Hi again!  As above we would now like to do the same for the https://www.chenebleu.com/ site.  I have set up a new page with the video on which is https://www.chenebleu.com/home-2  and tried to utilise the CSS you gave me to use on the site above but it does not seem to work.  The first problem is the video is not full page, there is still a grey banner across the top and also when the 'shop pop-up appears when viewers first see the site, the 'X' to close it does not work.  This is the code I have used taken from the La Verriere site:

 

//mobile view home page video full screen//
@media screen and (max-width:1500px) {
body#collection-66850fda597a333fea48367b {
div#block-yui_3_17_2_1_1720002119170_1451 video {height: 100vh;object-fit: cover !important;}

.sqs-native-video .native-video-player {padding: unset !important;}

.plyr__video-wrapper {
    overflow: visible !important;
}

.video-player .plyr {
    position: static !important;
}

.video-player .plyr__video-wrapper {
    z-index: 9999 !important;
}}}

//header to appear on video page//
header#header {
    z-index: 99999999 !important;
}
//show menu on video home page//
div#overlayNav {
    z-index: 9999999 !important;
}

/* Fullwidth video homepage */
body#collection-66850fda597a333fea48367b {
.banner-thumbnail-wrapper {
    display: none !important;
}
& {overflow: hidden;}
main#page {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.html-block {
    display: none;
}

.video-block {
    padding: 0px !important;
}

footer#footer, #preFooter {
    display: none !important;
}
}

 

Can you advise how I amend this to work as https://www.booking.laverriere.com/ now does (although there is a slight lag before it begins - is there a way to correct this?  Many thanks.  Sandra 

So you want, on this page: https://www.chenebleu.com/home-2

• Remove Header
• Make top video fullwidth on top section

?

@tuanphan yes that is correct, this will be the new home page but we need to allow the hamburger menu to still show, the logo to still show, and to be able to click the 'x' to close down the pop-up that appears on the home page.  It should look just like https://www.booking.laverriere.com/

Thank you, your help is appreciated