Full Screen Slider Header on Single Page?

Hello there,

Please go to Appearance > Customize > Header area > Header type > in the “Site header type” section, enable “Full screen slider”.

Regards,
Kharis

Thanks for your reply, Kharis.

Enabling “full screen slider” under “Site header type” would enable it on all pages of the site (except the front page).

I’d like to use the full screen slider only on one single page — but not the front page.

Is it possible to do this?

Yes, it is possible. You can switch to other header type in the “Front page header type” section.

Regards,
Kharis

Hi Kharis,

Thanks for your response. But I meant to say something else. Let me try and explain:

There are two header types on the theme: Front page header type and site header type.

The problem with “front page header type” is that it only inserts the header on the front page.

The problem with “site header type” is that it inserts the header on ALL the pages on the site (except for the front page).

BUT… I’d like to insert the header on only ONE of the normal pages — not the front page and not all the pages. Just ONE page.

Is this possible?

Hello there,

Yest, it is possible to do. Firstly you have to enable full screen slider for Site header type. Then, to only display it on pages, you need to add the CSS snippet below into your site’s additional CSS option (Appearance > Customize > Additional CSS).

body:not(.page) .site-header{
    background-color: #000;
}

body:not(.page) .header-slider{
    display: none;
}

@media only screen and (min-width:1025px){
    body:not(.page) .sydney-hero-area:before{
        display: block;
        content: '';
        height: 119px;
        position: relative;
    }    
}

Regards,
Kharis

Thanks very much, Kharis!

For anyone else reading this, here’s what I used to get the full screen slider on one single page (not the front page):

body:not(.page-id-61) .site-header{
    background-color: #000;
}

body:not(.page-id-61) .header-slider{
    display: none;
}

@media only screen and (min-width:1025px){
    body:not(.page-id-61) .sydney-hero-area:before{
        display: block;
        content: '';
        height: 119px;
        position: relative;
    }    
}