Problem implementing different header on single page

  • jeffbousquet

    (@jeffbousquet)


    7 years, 5 months ago

    OK, trying one more question here. I am using the Twenty-Sixteen theme and have 3 pages on my site, http://www.soundsoftheaveragelife.com . I’d like to have the same header for 2 of the 3 pages (“contact” and “blog”) and a different header for my “podcast” page. I came across the following CSS code:

    .page-id-121 .header-image {
    background-image: url(http://soundsoftheaveragelife.com/wp-content/uploads/2016/02/dirtywater_logo-copysmall.jpg);
    display: block;
    }

    This seems to put the correct image where I want it on the podcast page, but it is appearing BEHIND the site’s default header. If you hover the mouse over the header, you can see the correct image appear slightly translucent buried behind the main image. It’s as though the site’s header is over-riding the CSS change. Is there any way to fix this with CSS? Any help or suggestions would be great! Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    7 years, 5 months ago

    Try adding this rule as well:

    
.page-id-121 .header-image a:hover img, 
.page-id-121 .header-image a img {
   opacity: 0;
}

    This will hide the existing header image on that page.

    If you have other questions about the Twenty Sixteen theme, please post them on the Twenty Sixteen support page.

    Thread Starter jeffbousquet

    (@jeffbousquet)

    7 years, 5 months ago

    Thanks so much for this! My apologizes, I am fairly new to the site and thought I may be in the wrong category, noted for the future!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Problem implementing different header on single page’ is closed to new replies.