How to remove Header & Nav for Landing Page?

  • Harmony

    (@harmonywebworks)


    6 years, 10 months ago

    Looking to do this with only CSS. Was able to do so with the footer, but I’m missing something for the header.

    The page is supposed to be a landing page, so we don’t need any header or footer, just the content. I know there are plugins I can use to start with a “blank slate” but I’d prefer to do this is a less invasive way, figured CSS would be best practice.

    Ideas?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @harmonywebworks,
    how about adding the following CSS?

    .page-top.fullwidth-block.row {
	display: none;
}
#header {
	display: none;
}

    Is that what you need?

    Thread Starter Harmony

    (@harmonywebworks)

    Well, it needs to be for this specific page only. That code removes it from the entire site.

    As I understand it, it would have to include:

    .page-id-11061

    So where would that fit in?

    • This reply was modified 6 years, 10 months ago by Harmony.

    @harmonywebworks,
    I use Developer Tools on Firefox and Chrome. Press F12 an switch to the Inspector tab (Firefox) or Elements tab (Chrome).
    Just add the post specific class in front of the previous code to restrict to a specific page

    .page-id-11061 .page-top.fullwidth-block.row {
	display: none;
}
.page-id-11061 #header {
	display: none;
}
    • This reply was modified 6 years, 10 months ago by alichani.
    Thread Starter Harmony

    (@harmonywebworks)

    OK, that seems to do the trick. TY!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to remove Header & Nav for Landing Page?’ is closed to new replies.