Homepage › Community Forums › Epik Theme Support › Increase height of header image and center it
Tagged: header image height
Hi there – My header image is 600 x 600, and of course I’d like to center it across the theme, and maintain responsiveness. So here are my questions:
* where in the css do I modify line height & width so the header image height is increased? After reading thru numerous posts, I’m confused b/c I can see that there’s recommendations to change ‘min-height’ from a higher to a lower #, but that’s usually to shrink the header space. I have the opposite issue, and need to enlarge it.
* Do I need to add something to functions.php to accommodate this customization? I read about a custom-header adjustment, not sure this applies to me.
Thanks, really appreciate your help.
-DonO
Sorry, forgot to ask:
* I assume I need to upload proportionately smaller versions of this image, and then reference them in css, in order to maintain responsiveness for tablets and phone screens. Could you walk me thru the x’s and o’s on this a little bit? Specifically, where in css do I control the choice of which image is used for each media width?
Thanks!
Do you have a link to a live site (not the code) so I can see what needs to be done.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric, yes it’s here at http://www.coffeeuniversity.org.
-DonO
You control whats shown by adding it in the responsive css. Specifically the iPhone section. You could add a smaller image up to or around 480px for the iPhone. Then add it to the css and let me see how it looks, because there may need to be an additional step depending on how it shows up.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
OK great, thanks! Now here’s the next piece of this:
1. I have a logo for the regular site; it’s 600×600 pixels.
2. What parts of the css do I modify so that the whole logo shows up in the header? I’m not worried about responsive, yet, just the regular / main part of the site.
what values (lines numbers in styles.css would be helpful) do I modify in order to change the image height to 600 in the header?
Thanks.
-DonO
You can add a height to the #header section of your css….or even the #header title area around line 685 –
.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 50%;
}
Notice its currently set at min-height: 120px
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric — Thanks! So …. I think I’m figuring this out. The reason why my 600px high logo isn’t showing at full height isn’t because of min-height, I think. Is it because ‘overflow’ is set to ‘hidden’?
That could be very interesting.
Also, why is text-indent sent to such a large negative #. What does this achieve?
Thanks!
DonO
No, min-height is the minimum height, you’re thinking of “maximum”. The overflow could be whats preventing things from showing up outside of the div, but if you add in your logo at the right size that should be an issue.
Text indent moves the text out of the way – https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
THanks, Eric. Just out of curiosity, do you have any involvement with Cobaltapps?
D
No, haven’t used them.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
In case anyone else reads thru this, here’s what I found:
1. Adjust width and height in functions.php at lines 33-35, genesis-custom-header
2. Adjust min-height in style.css at line 690 for class .header-image and id #title-area
Bam! Your logo will now fit. Be sure that your logo’s background (even if it’s transparent) is set to 1152 pixels wide*, or the cropping tool inside of Genesis / WordPress will kick on and try to fill up the width with a cropped version of your logo.
*I have not yet tackled the responsive aspect of the header image, so this will break responsive design, I believe.
-DonO