Changing the size of the header area

[rhondahmg]

I would like to make the header bar across the top of the page narrower, possibly with the logo moved down so that it looks more like this header: http://phsrealty.com/testsite/

Is there a fairly simple way to do this? I’m not afraid to get my hands dirty with the code, and I could probably eventually get there on my own, but I’d rather skip the hit-and-miss of trying it myself if possible! Thanks!

---

[Ginger Coolidge]

Hi there,

This can be done I believe with just altering the CSS. If you are a Chrome or FireFox browser user I would look into using Firebug or Inspect Element in Chrome to look at the various elements of the header. Besides reducing the height of the header, you’ll need to adjust the padding to pull up the menu and social icons. Then, assuming you’re using a logo image, made that taller to hang down below the narrower header. This is all contained in the theme’s style.css file.

Carrie has a tutorial on her site for troubleshooting CSS using Firefox. The second link is to another Genesis Developer’s tutorial (Andrea) and she is using Chrome.

Firebug Demo: How to Troubleshoot CSS

http://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

---

[Eva]

Hello!
Can the header only be changed by adjusting the css? I have uploaded a header image, with the exact size (300 × 80 pixels), but then the header height increased and that does not look good. I have no problem changing the css, but I thought there might be another way to change this. Anybody?
Thanks!

---

[Ginger Coolidge]

Hi Eva,

On your header image, there’s a minimum pixel height set on the title area that you can adjust.

Look for this in your CSS:

.header-image .site-title a

and change the min-height to work better with your image.

Hope this works for you!

Best Regards,

Ginger

---

[Chaseaidan]

Can the header image width be changed too?

---

[Ginger Coolidge]

Hi there,

You can change the header image dimensions but to this you will need to change where they are defined in functions.php and also in your styles.css. It’s a bit more of an effort. If you’re comfortable with that I can point you to some tutorials.

The above height adjustment wasn’t actually changing the image it was repositioning it vertically.

Best,

Ginger

---

[Chaseaidan]

Ginger – That would be great if you could recommend some tutorials

---

[Ginger Coolidge]

Howdy,

How about we just create a tutorial right here 🙂 The ones I found were over-complicated.

So, locate this section in your functions.php file:

// Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 80,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

And change that width and height to whatever dimensions you like. You’ll likely need to change a few things in your style.css file but see how it looks first and then I can give you tips on that.

Remember it is recommended to have FTP access to your site to make the changes to the files. One mistake in the Appearance > Editor section of your dashboard and you can render your site inaccessible. Also it’s a good idea to save a backup of any of the files you are making changes to.

Best,

Ginger

---

[Author]

Posts