• I currently use

    .site-header {
    display: none;
    }

    to remove headers on all my pages. But, I want to target one specific page to display the header on and the rest no header. I’m kinda new at this! Thank you for any help!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • I wanted to do this too. Not a lot of info out there but this worked for me:

    Try cutting and pasting the following on top of the appropriate section of your header.php. You are only adding two lines of code, the top and bottom lines. Hope this helps.

    <?php if( is_front_page() ) : ?>
    <div class=”site-header”>
    <div class=”site-branding”>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
    <h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

    </div><!–.site-branding–>
    </div><!–.site-header–>
    <?php endif; ?>

    If you don’t have a static front page, then I believe the first line is:
    <?php if( is_home() ) : ?>

    but please verify that before you change it, that one I’m not 100% sure about

    Hoping not to sound too technical and seeing that you have already tampered with the CSS directives, my approach would be to restore the rules for the site header, only changing the CSS selector to target the header of one specific page instead of all of them.
    The way to do this is simple, your theme is automatically adding a series of classes to the body tag on each of your pages. If you navigate to any of your pages and hit Ctrl+U (or Cmd+U on Mac) you’ll see the actual code of the page. Find the body tag (I suggest doing a Ctrl+F – Cmd+F for Mac – and searching for “<body” without the quotations). What you’ll see is that your body tag has a long string of classes. Find the “page-id-xxx” (where xxx is a unique number for that page) and use that as your unique selector in the CSS.
    Your CSS should look something like:

    .page-id-xxx .site-header {
      background: url(path to the background image);
      // more rules
    }

    Hope it helps

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Display header only on one page’ is closed to new replies.