Winning Agent

Sales That Work

  • About
  • Store
  • Blog
  • The Stream
  • Forum
  • Jobs

Changing the size of the header area

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 7 years, 5 months ago by Ginger Coolidge.
Viewing 7 reply threads
  • Author
    Posts
    • May 29, 2014 at 2:45 pm #3053
      rhondahmg
      Participant

      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!


    • June 5, 2014 at 4:40 pm #3081
      Ginger Coolidge
      Participant

      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/


    • July 14, 2014 at 9:47 am #3295
      Eva
      Participant

      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!


    • July 14, 2014 at 10:30 pm #3297
      Ginger Coolidge
      Participant

      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


    • January 26, 2015 at 8:18 am #4308
      Chaseaidan
      Participant

      Can the header image width be changed too?


    • January 26, 2015 at 7:41 pm #4312
      Ginger Coolidge
      Participant

      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


    • January 27, 2015 at 11:46 am #4319
      Chaseaidan
      Participant

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


    • January 27, 2015 at 5:53 pm #4322
      Ginger Coolidge
      Participant

      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
Viewing 7 reply threads
  • You must be logged in to reply to this topic.
Log In

Forum Login

Log In
Register Lost Password

Search Forums

StudioPress Real Estate WordPress Theme: Agent Focused Pro Theme
StudioPress Premium WordPress Themes: Winning Agent Pro Theme

Recent Replies

  • How to edit main page background image opacity
  • Fresh Install Issues
  • Remove Background Image
  • Sidebar on Homepage
  • Featured Page on Homepage Not Clickable
OptinMonster

Loan Types & Property Definitions

There are a lot of different types of mortgages, and there are a lot of different types of real estate property. Here is a list of the most common types of each. We’ve added some links to the most popular articles on the subject.

Read More

Real Estate and Mortgage Forum

We think getting many viewpoints to a particular question is important because it helps you to make better decisions. It’s so important that we have woven the Forum all throughout Winning Agent. We invite you to ask questions, make comments, and be part of the discussion.

Read More

Glossary of Real Estate Terms

Real estate and mortgage finance often times comes with its own unique language. If you work with it every day, it becomes 2nd nature, but most people don’t work with it every day. So we’ve created a glossary of mortgage and real estate terms.

Read More

Copyright © 2022 Winning Agent · Powered by the Genesis Framework · Contact Us
Become an Affiliate
This site uses affiliate links, but know that we only recommend products we personally use and enjoy!