Need help? Check out our Support site, then


Can I change header height on home page only?

  1. northbrookdairy
    Member

    I changed the header height in CSS to accommodate my nice tall header (990x499) which looks great on my home page. However, I'd like to use a normal-height header (990x180 in Coraline) on all other pages and posts. When I set a normal-height header as the Featured Image on a secondary page, there's a big gap between the bottom of the header and the beginning of the body text on the page. Clearly, I need to enter some kind of conditional statement that changes the header height *only* on the home page. Is this do-able in CSS?

    The blog I need help with is northbrookdairy.com.

  2. I checked http://northbrookdairy.com/products/ and it looks like you've removed the large header image from the home page for now. If you'd like to add that back and post another reply here, I'd be happy to help you take a closer look.

    The solution I would use for this problem would be to replace the header image JUST on the home page with the larger image. If you'd like to try that option, please provide a link to the header image from your media library in a reply here.

  3. northbrookdairy
    Member

    Here's the link to my original, tall header. If I could feature this just on the home page, that would be swell.

    http://northbrookdairy.files.wordpress.com/2012/10/nbf-header-990x479.jpg

  4. Here is a CSS example that will replace the header image just on the home page in the Coraline theme:

    .home #branding img {
    	display: none;
    }
    
    .home #branding > a {
    	display: block;
    	height: 479px;
    	margin-top: 30px;
    	background: url(http://northbrookdairy.files.wordpress.com/2012/10/nbf-header-990x479.jpg) no-repeat;
    }
  5. northbrookdairy
    Member

    That worked beautifully! Thank you very much!!

  6. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic