How To Reduce The Height of Twenty Thirteen Theme Site Header

I was going to go and take a photo to replace the header image of the Twenty Thirteen WordPress 3.6 theme but I wasn’t quite happy with the size of the header image.

The header size of the theme just seemed too large, and too especially high when viewing with smaller width browsers and devices.

So, instead of going to take a photo, I spent the time going through the template files to find out how to reduce the height of the image.and how to move the site title and description text so that it centred when I reduced the height of the header image.

I also went through the code to find out how to move the site title and description text so that it centred when I reduced the height of the header image.

The first place I looked was in the style.css file where I discovered that the height of the theme header image and the position of the site title and description can be changed.

To Reduce The Height Of The Twenty Thirteen Theme Header:

The changes below to the style.css file will reduce the height of the theme header image from that of the default height.

So, download your style.css file from the /wordpress/wp-content/themes/twentythirteen directory, and make the following changes.

Change this:

.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 230px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

To:

.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 130px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

Note: the min-height value has been changed from 230px to 130px.

To Vertically Re-center The Title and Description:

Change this:

.site-title {
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 58px 0 10px;
}

To:

.site-title {
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 17px 0 10px;
}

Note: the padding values have been changed from 58px 0 10px to 17px 0 10px.

That should do it. Now save the style.css file and upload it back to the WordPress twentythirteen theme directory.

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by

Tags:


Comments

21 responses to “How To Reduce The Height of Twenty Thirteen Theme Site Header”

  1. hong avatar
    hong

    It looks perfect on the computer.
    But it doesn’t look good on tablets and phones.
    Tablet display will have unequal spacing between top and bottom; mobile phone display will have white horizontal bars on the navigation bar, probably because the image is scaled according to the original theme. If you remove the image, it’s all white, no problem.

    Don’t know how to fix the white horizontal bars?

  2. siteadmingreenh avatar
    siteadmingreenh

    Hi,
    I’m sorry to bother you, but I’m searching for solutions for my wordpress site problem and I found your site.
    I’m hoping that maybe you could help me.
    I want my header image to have 1080px x 150px and I’ve uploaded one with that size.
    However, I’ve got a white line on top of the image and my nav bar is inside the bottom of the header image, on top of it.
    Besides, when I reduce my firefox window, the nav bar line grows bigger.
    I can’t figure out what to do to fix this.
    Could you please help me?
    My site is: http://www.greenh.net
    Thank you so much

    1. Bharat Karavadra avatar

      Hello,
      You do not seem to be using the default theme code as the header image on your site scales differently to the default theme. See https://twentythirteendemo.wordpress.com/ which scales in steps and your site’s header image scales continuously on lower resolution than the maximum displayed width of your image.

      Also, there is no white line appearing here on Firefox nor Chrome.

      It seems you have put in custom code into your theme files and hence without looking at the theme files it may not be easy to find out what you have done.

      Also, it would generally be easier for all to help if you post how you want the theme and header to work.

      1. siteadmingreenh avatar
        siteadmingreenh

        Hi,

        Thank you so much for taking the time to help me.
        I’m very new to all this and I’m a bit lost, I’ve been reading here and there and experimenting on different things so I can get the site how I’d like it to be.
        I want the header image to work just like the one on the default theme. However, when I uploaded my image, it was always cut and I couldn’t get it to fit. So I added the following code to my child theme style.css:
        body .site-header {
        background-size: 100%;
        }
        This way, the header fits perfectly, but when I resize the window, there’s this huge space between the image and the nav bar. Without this code, when I resized the window, the image disappeared altogether.
        My goal is to have a a header image with 1080px x 150px size and a gradient background image consistent through the whole site. However, because I’m such a newbie, I’m afraid I’ve been complicating what probably is very easy to do.
        Again, thank you so much for your help.
        Vânia

        1. Bharat Karavadra avatar

          Hello again,
          I had a quick look with Chrome Developer Tools to see if I could over-ride any CSS settings that were keeping the height of the header area fixed but the over-rides did not work. Hence, the best thing I can suggest is to remove the header html and css totally from the header.php file for where the header image is displayed and then write some custom html and css only for that header image.

          I remember having a similar requirement for the twenty fourteen theme where I wanted the header image to scale and I had to write some custom code.

          1. siteadmingreenh avatar
            siteadmingreenh

            Thank you so much :).
            Can I ask you just one thing more?
            Could you tell me a site where I can learn more about how to create a header image to scale?
            Thank you again for your time and patience.

            1. Bharat Karavadra avatar

              Hello again,
              I am working on a twenty thirteen wordpress theme that requires a custom scaling header and when it has been done I will post a link to it here for you to see if that is how you want the header image to scale. In the meantime try a google search or if you want code customisation then use the contact page to contact me to get a quote.

              Bharat

              1. siteadmingreenh avatar
                siteadmingreenh

                Thank you again for all your trouble and for your help.
                I’m thinking of changing the theme to one I’m more familiar with.
                Thank you :)

  3. Bava avatar

    It worked! Thanks:)

  4. South Media 24 avatar

    Hi & Warm Greetings !!

    I’ve changed the header size in style.css and uploaded but when I try to change the header, its still asking to choose 1600×230 and when I’m selecting my new header image of 1600×130 size its asking to crop(half of its size)

    Please provide the solution.

    Best Regards,
    Noah

    1. Bharat Karavadra avatar

      Hi Noah,
      I have written custom header image code to display random images but which are still 230 pixels high, and only the top 130 pixels are being displayed due to the reduction in the header height.

      However, try uploading a 1600 x 130 image and using all of it.

      1. South Media 24 avatar

        Many Thanks for your help :)

  5. Rob avatar

    Thanks, that helped, however now the header font size is not responsive. It used to reduce in size as the window size reduced, but now it stays the same size.

    1. Bharat Karavadra avatar

      Hi Rob,
      I just checked the header font size on this site and it’s responsive properties seem to work. Check that you have not made any changes that would effect the site-title css.

  6. Ariel avatar

    thank you very much , very helpfull

  7. Agent Beyavid avatar

    I would like to stack the site description above the header image. And suggestions?

    1. Bharat Karavadra avatar

      Hello Agent (unusual name),
      In you /wordpress/wp-content/themes/twentythirteen directory there is the header.php file. Download the file and make the following changes just after the body tag.

      In between these lines of code:

      	

      Add this line:

      		

      So now you have the following three lines:

      	

      Save the changes.

      This will shift the header down to display the Tagline that you have set in Admin > Settings > General, just above the images on a white background.

      To customise how the tagline appears, downloaded and edit the style.css file from the /wordpress/wp-content/themes/twentythirteen directory and add a new class for the style called my-site-description and add the formatting that you want.

      Remember to upload both the header.php and style.css file back to the /wordpress/wp-content/themes/twentythirteen directory after you have made the changes.

  8. Shaid Hayat Khan avatar
  9. Bindiya avatar

    appreciate it, really helpful. I was facing similar issue with this new theme but big header was annoying

  10. pintushaw avatar

    Great ! This resolved my problem. I was also obsessed by big header.

  11. ramblingtrish avatar

    I so do not CSS at all (planning on learning soon) and this helped a lot . Thanks!

Leave a Reply to South Media 24 Cancel reply

Your email address will not be published. Required fields are marked *

>