hide header and footer on a specific page

  • Hi,

    I am using the Tesseract Theme to create a home page for my department (see https://www.kmavejle.dk ). The home page includes a manual for an IT application. On the page with the manual, I would like to have a clean look without header, menu and footer.

    I have installed the “simple custom css” plugin. In the plugin I wrote the following:

    .page-id-523 header#masthead {
    display: none !important;
    }

    .page-id-523 footer#colophon {
    display: none;
    }

    Unfortuanetly this does not completely solve the problem as you can see here:
    See page

    How do I hide the rest?

    • This topic was modified 8 years, 2 months ago by Jan Dembowski.
Viewing 2 replies - 1 through 2 (of 2 total)
  • .page-id-523 #main-nav {
    display: none;
}

    Add this to hide the menu.

    • This reply was modified 8 years, 4 months ago by ThemeSumo.
    Thread Starter kmalouise

    (@kmalouise)

    Thanks for your reply.

    It did not work until I wrote “!important” – but now it Works:

    .page-id-523 header#masthead {
    display: none !important;
    }

    .page-id-523 footer#colophon {
    display: none;
    }

    .page-id-523 #main-nav {
    display: none; !important;
    }

    Dont know what “!important” does.

    I need to to this for several pages. Is it possible to include more page ids in the CSS i wrote above, so that it looks something like this:

    .page-id-523,.page-id-524,.page-id-525 header#masthead {
    display: none !important;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘hide header and footer on a specific page’ is closed to new replies.