How to Hide header with CSS

  • Resolved ccannon8888

    (@ccannon8888)


    10 years, 2 months ago

    Hi,

    Using CSS, I’m trying to hide the header for this page:

    millenniumdestinationclub.com/test-landing-page/

    I managed to hide the footer with:

    body.page-id-946 #footer-banner {
    display: none;
    }

    But I can’t seem to get the header to hide. I tried the same approach I used for the footer but I guess I’m targeting the wrong ID. Could take a look at the page and let me know which ID(s) I should be targeting?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Geoffrey Shilling

    (@geoffreyshilling)

    Volunteer Moderator

    10 years, 2 months ago

    It looks like you have two ID’s called masthead – this will cause issues and I would delete the first one. I would check in your header and see if you can find the duplicates.

    You have the first masthead visibility set to hidden, but it is the second that is still showing. Look for this code:

    <header id="masthead" class="site-header pos-relative menusize-autowidth no-header-image cloned" role="banner" style="position: fixed; top: 0px; margin-left: 0px; z-index: 500; display: block; left: 0px; width: 1654px; margin-top: 0px; padding: 10px 0px;"> If you set the visibility on that, it should give you the result you are looking for.

    Note: I recommend using a child theme or a plugin that allows you to add custom CSS for this.

    Thread Starter ccannon8888

    (@ccannon8888)

    10 years, 2 months ago

    I searched the theme’s header.php but only found one instance of <header id=”masthead”…

    I see the duplicate masthead ID too when I view the page source in the developer tools console for that page.

    Any suggestion on where else I might track down the source of the other ID causing the problem?

    BTW, I also tried

    body.page-id-946 #masthead {
    display: none;
    }

    but that did not work.

    Thread Starter ccannon8888

    (@ccannon8888)

    10 years, 2 months ago

    I found the solution.

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

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

The topic ‘How to Hide header with CSS’ is closed to new replies.