remove header for specific page

  • Resolved Carlo

    (@ccozzi)


    7 years, 5 months ago

    I want to remove the header for a specific page with CSS code. I have the following:

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

    For home, the code works and the header is suppressed. For post-34738 however, I can stand on my head but the header remains visible. This is for all pages that are not .home …

    Does anyone have any ideas why it’s not working? Thanks in advance for any help…

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The class you’ve used for ‘post-34738’ is usually something like ‘postid-34738’. Can you double-check the class? Also which element are you looking at for this class?

    Thread Starter Carlo

    (@ccozzi)

    I don’t know exactly. Can you see that? The page: https://www.carlitoergosum.nl/voorkant/
    The silly thing is that other css works, also for that specific page.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh I think you’re looking at the wrong element. You generally need to look at the <body> element for the class to use.

    This is the <body> element on that page:

    
<body class="wordpress ltr parent-theme y2017 m06 d22 h11 thursday logged-out singular singular-page ...>

    The class you were using (‘.post-34738’) that you’ve said works in other styles is probably targeting different things on the page and not the header.

    Thread Starter Carlo

    (@ccozzi)

    Ah, thanks. But now I’m totally lost. How do I CSS that header away then? What would the code to use be then? Sorry, I am not a specialist… ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using the singular-page-34738 class:

    
.singular-page-34738 .site-header {
    display: none;
}
    Thread Starter Carlo

    (@ccozzi)

    Hm, it works. Thanks! How you found that eludes me, but hey, I can live with that….

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    No worries. For future reference you can find this by:

    1. Right clicking on the page and selecting “View source”
    2. In the new “View source” window/ tab, search for “<body”
    3. Inside this <body> element search for a class with a unique number, such as “singular-page-34738”

    4. Copy this class and prepend it to your CSS, e.g.: 
      
.singular-page-34738 .site-header {
    display: none;
}
    Thread Starter Carlo

    (@ccozzi)

    Great. Thanks again…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘remove header for specific page’ is closed to new replies.