Home › Forums › Winning Agent Pro Theme › Changing the size of the header area
Tagged: header elements, header height, header image
- This topic has 7 replies, 4 voices, and was last updated 8 years, 10 months ago by
Ginger Coolidge.
- AuthorPosts
- May 29, 2014 at 2:45 pm #3053
rhondahmg
ParticipantI 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!
- June 5, 2014 at 4:40 pm #3081
Ginger Coolidge
ParticipantHi 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.
http://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/
- July 14, 2014 at 9:47 am #3295
Eva
ParticipantHello!
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! - July 14, 2014 at 10:30 pm #3297
Ginger Coolidge
ParticipantHi 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
- January 26, 2015 at 8:18 am #4308
Chaseaidan
ParticipantCan the header image width be changed too?
- January 26, 2015 at 7:41 pm #4312
Ginger Coolidge
ParticipantHi 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
- January 27, 2015 at 11:46 am #4319
Chaseaidan
ParticipantGinger – That would be great if you could recommend some tutorials
- January 27, 2015 at 5:53 pm #4322
Ginger Coolidge
ParticipantHowdy,
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
- AuthorPosts
- You must be logged in to reply to this topic.