Archived topic

hide header on home page only using css

8 replies · Started by sparkle on July 23, 2018

Viewing posts 1–9 of 9

July 23, 2018 at 11:39 am #630899

hello,

i've created a slider that i want to have replace my header on the home page. i'm trying to hide the header with css. i can get it to disappear across the site by using .header-aligned-left .site-header {display: none!important;} but it won't remove it from the home page if i use body.home .header-aligned-left .site-header {display: none!important;} or .page-id-XXXX .header-aligned-left .site-header {display: none!important;}

how come? what's the better way i don't know?

thanks.

July 23, 2018 at 11:43 am #630904

Hi there,

To remove header on home page only, try this CSS:

.home .site-header {
    display: none;
}

July 23, 2018 at 11:50 am #630913

hi leo,

thanks! i swear the first time i tried that it didn't work, but maybe i used .masthead. now i'd like to get the margin out from between the navigation and my slider .home .separate-containers {margin-top: 0px!important;} isn't doing it for me.

thank you!

July 23, 2018 at 12:33 pm #630948

home and separate-containers are both in the <body> tag so there shouldn't be a space between them:
.home.separate-containers

July 23, 2018 at 2:16 pm #631023

huh. i still can't get it to tighten up.

July 23, 2018 at 4:26 pm #631076

hm... i took out the home and it works well enough with
.separate-containers .page-header-contained, .separate-containers .page-header-content-single, .separate-containers .page-header-image, .separate-containers .page-header-image-single {margin-top: 0px!important;}

July 23, 2018 at 7:34 pm #631151

Maybe this is what you are looking for?

.home.separate-containers .page-header-contained {
    margin-top: 0;
}

July 23, 2018 at 7:52 pm #631162

that did it. thank you!

July 23, 2018 at 7:54 pm #631163

No problem :)

This archived topic is closed to new replies.

Start building better websites today.