Remove header for a single page

  • Resolved annabanana74

    (@annabanana74)


    6 years, 6 months ago

    Hi there,

    I tried to remove the header and menu from a single page on my website. (I’m not sure why the right click is turned off too, but that’s a different item.) I only want the page title and the gallery to show for a charity on this page only.

    Here’s the code I used in simple css:
    .page-id-1321 .site-header {
    display: none;
    }

    I am a novice in coding, so any suggestions are greatly appreciated.

    Thanks for your help!

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

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

  • So you had the right idea, just the wrong selector. I was able to get into the inspector tools by going to View->Developer->Developer Tools in Chrome on a Mac (not sure about the process for other OS/browsers). Anyway, the selector for the header is as id of “header”. So, you just need to change that css to:

    .page-id-1321 #header {
  display: none;
}

    Doing this, however, results in a large white spot at the top of the page, so you’ll also need to add the following:

    .page-id-1321 .page-wrapper {
  padding: 0 !important;
}

    I hope this helps!

    Thread Starter annabanana74

    (@annabanana74)

    Greatness. Worked and done. Thank you so much!!

    Your css was close.
    Try this in your custom CSS:

    .page-id-1321 #header {
display: none;
}

    I used my browser inspector to see how the css was named etc.

    Thread Starter annabanana74

    (@annabanana74)

    Thanks. I did use my inspector to learn the page id. I can’t find how you can see the css name. I only see <head> not #header?

    Using the browser inspector, I see that the DIV that structures the page heading+menu etc, starts like this:
    <div id="header" style="">
    The ID needs a hash “#” as a CSS prefix, similarly CLASS needs a dot “.” prefix.
    Confusingly the “page id” is actually a class.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove header for a single page’ is closed to new replies.