Hide header & keep primary menu

  • Resolved daddybo

    (@daddybo)


    8 years, 6 months ago

    For a few specific pages, I want to hide the header banner image, header logo, header title, header subtitle AND BUT I want to keep the primary menu.
    Is there a quick CSS to do this?

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

  • Yes. Each page is going to have a specific ID associated with it. You can see the ID by doing a view source or view page source on the page. Look for the <body tag, it should look something like this:

    <body class="page page-id-15 page-parent page-template-default ...

    The page-id-## is the class name which uniquely identifies each page; that is, the ## will be different for each page.

    So let’s say you want to hide those elements on page IDs 123 and 456. You would add this rule using a CSS plugin (don’t modify the theme’s style.css file, or your changes will be lost the next time you update the theme):

    .page-id-123 .site-branding,
.page-id-123 #banner-wrapper,
.page-id-456 .site-branding,
.page-id-456 #banner-wrapper
{
   display: none;
}

    So note that there is a pair of selectors for each page, one which selects the site title & tag line, and the other which selects the banner image. The very last selector in the list should not have a comma after it (a comma, though, must separate each selector).

    Thread Starter daddybo

    (@daddybo)

    Thank you!
    This works just great.

    Thread Starter daddybo

    (@daddybo)

    That worked great for the pages I wanted no header on; however, I’m getting stuck on my blog page. It stills displays the header.

    Looking at my source code, part of the menu is as follows:

    <li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-415 current_page_item current_page_parent menu-item-979"><a href="https://www.taichichihnoco.com/community-blog-tccnoco/">Blog</a></li>
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="https://www.taichichihnoco.com/sharing-the-joy/">Sharing The Joy</a></li>

    This css is not working (but does work for all my other pages)-
    .page-id-415 .site-branding, /* 415 is BLOG */
    .page-id-415 #banner-wrapper,
    {
    display: none;
    }

    Is there something different I need to do for the page set as my Blog?

    When you view the source for the blog page, then I assume that there’s no page-id-415 class associated with the body tag. But you may see a blog class, so you can try:

    .blog .site-branding,
.blog #banner-wrapper,
{
   display: none;
}

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You want this hidden on the blog home page (where your post summaries show), or the full post pages as well?

    Ah, ignore that…CrouchingBrian beat me to it, lol

    Thread Starter daddybo

    (@daddybo)

    I would like to know how to hide this on the full posts of blog as well. Would you need the css for each post? or is there a better “global” manner that would apply to all posts for the blog’s category?

    Each single post is going to have a class name called single-post, so you can use that in the selector:

    .single-post .site-branding,
.single-post #banner-wrapper,
{
   display: none;
}

    Thread Starter daddybo

    (@daddybo)

    Thank you for the assistance.
    You have helped me learn.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I also want to say thanks to CrouchingBruin for helping out as well…thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Hide header & keep primary menu’ is closed to new replies.