Viewing 12 replies - 1 through 12 (of 12 total)
  • Hey Michael,

    How are you doing today?

    Hiding any part of your site on specific page is definitely possible with CSS since there is a class in body element of that page with the page ID which you can use to target styles for that page only.

    You can also try using plugins such as this one that allows you to display different menu on different pages:

    https://www.ads-software.com/plugins/page-specific-menu-items/

    Best regards,
    Bojan

    Thread Starter michaelsfdn

    (@michaelsfdn)

    Hey Bojan,

    I’m fine thank you and you?

    I am not very familiar with page ID and CSS in WordPress. I think that the page ID of this page is “page-id-17635” but I don’t really know what to do with it…

    I will try the “Page Specific Menu Items” plugin and I will come back to you ASAP.

    Best regards,
    Michael

    Thread Starter michaelsfdn

    (@michaelsfdn)

    Hey Bojan,

    I did try the plugin but it is not really what I wanted.

    In fact, I would like to have a blank page, no header and no footer only on that specific page : https://www.advertiseat.com/fidelidade in order to put a completely different content with Beaver Builder. How can I do that? ??

    Thank you in advance,
    Michael

    Hey again Michael,

    Yes “page-id-17635” is the class that you’re looking for. If you add that to the beginning of your CSS selector the styles will be applied to elements on that page only if that makes sense.

    Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

    https://www.ads-software.com/plugins/simple-custom-css

    .page-id-17635 header#masthead {
        display: none !important;
    }
    
    .page-id-17635 footer#colophon {
        display: none;
    }

    This should hide header and footer on that page only.

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter michaelsfdn

    (@michaelsfdn)

    Bojan,

    Thank you for your answer! Indeed, your code was very helpful and as you can see it is working well on the Web version: https://www.advertiseat.com/fidelidade

    However, it’s not working on the mobile version (the website is responsive). How can I fix that? (by “not working” I mean that I still can see the header and the footer)

    Thank you in advance,

    Michael

    Thread Starter michaelsfdn

    (@michaelsfdn)

    Bojan,

    It is working on the mobile version now!
    I don’t really how I did that because I didn’t do anything. I guess the CSS needed time to “reach” the mobile version…

    Thank you for your support. You were very helpful.

    Michael

    Hey Michael,

    There is no reason for code not to work on mobile screens unless your site is using different classes for this on mobile which is highly unlikely since these are header and footer so it was most likely just a caching issue.

    Either way glad the code worked and have a great day!

    Cheers,
    Bojan

    Thread Starter michaelsfdn

    (@michaelsfdn)

    Hey Bojan,

    Oh okay, I didn’t know that.
    Thank you for your support.

    Have a nice day,
    Michael

    Hey guys, I followed your argument because I have the same need, though I can’t seem to find my page ID. How can i fin it? my site is ainasmagazine.com and want to hide home header and change background color only for that page. how should I proceed? thank you!

    Hey sofiaarangoe,

    You can check for the page ID class by using developer tools and inspecting that page, you’ll be able to find the class in the body element, see screenshot: https://screencast.com/t/eqWLcs9Os3. Please note that for home page you can also use “home” in your selector instead of page ID.

    This means when you add this into your CSS selectors for hiding home header or background this will only affect that specific page rather then all pages where these classes are being used.

    Hope this helps and please if you have additional questions open your own thread.

    Cheers,
    Bojan

    Sorry to wake up this old thread!

    I want to do the exact same thing as the threadstarter, but the page-id is a post-id.

    I have tried the following and nothing happens.

    .product-id-293/.page-id-293/.post-id-293 header#masthead {
    display: none !important;
    }

    .product-id-293/.page-id-293/.post-id-293 footer#colophon {
    display: none;
    }

    • This reply was modified 8 years, 3 months ago by hatmpatn.

    Hi Hatmpatn,

    I had the same problem but just ignored the fact that it said page-id and wrote the post-id number:

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

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

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