How To Reduce The Header Height Size Of The Twenty Seventeen Theme Front Page

Posted on 11 November 2016 in Twenty Seventeen Theme Customisation
Comments: 82

The default Twenty Seventeen front page header image uses the full height of the screen except for the menu that appears underneath. This size of this header can be changed.

The default header image.

2016-11-11-twenty-seventeen-header-height-a

A reduced height header image.

The height of the header has been reduced by 50% in this example. Note that the header height includes the main navigation menu and so the image appears a little less than 50% in height.
2016-11-11-twenty-seventeen-header-height-b

Where and how to change the height of the header:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The first section is for a computer / laptop screen.
  • The second section is for a tablet or phone screen.
  • The third is the same as the first but for logged in users where the WordPress admin bar.

The CSS code:

/*Computer screen */
@media screen and (min-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
	height: 50vh;
	}
}
 
/* Mobile screen*/
@media screen and (max-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header
{
	/*display: table;*/
	/*height: 300px;*/
	/*height: 75vh;*/
	height: 50vh;
	/*width: 100%;*/
	}
}
 
/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, .admin-bar.twentyseventeen-front-page.has-header-image.home.blog .custom-header {
	/*height: calc(100vh - 32px);*/
	height: calc(50vh - 32px);
	}
}
Share this:

Tags


Comment, ask or share something...

  1. is it possible to make the are smaller without loosing parts of the header? i would like to be able to see the whole image but smaller, if possible?
    thanks

    1. Jamal,
      The header will vary in size, shape and appearance depending on the screen resolution, browser windows size and device. The numerous combination of variations would require considerable custom coding. The advice I have given to other people who have had similar desires is that if the appearance of a level of control over the appearance of a header image is critical then try the WordPress.org plugin directory or perhaps another theme which allows more control over the header images.

  2. I have read several of your posts and you advise folks to go to Appearance->Edit CSS. My installation does not include that. It says Appearance->Editor and then it drops you into the Style.CSS. Can I just add your code snippets at the top of the Style.CSS? I have seen that others are confused by this also. Unfortunately, my manager does not allow me to share the login creds. I am a bit new to working with WP so appreciate your help.

  3. Hi Bharat,

    Please forgive if this is a 'stupid leek', but does this code effectiveley 'clip' the image to the sizes entered in to the code?
    If I needed the code to 'scale' the image to fit mobile devices how would this work?

    I have a custom image for the Header, I'd like the same image fully available on Desktops and Mobile devices... am I missing something... sorry :0/

    1. Hello,
      The code does clip the image to the percentage height of the screen which is donated by the number before the 'vh'

      The section with the comment /* Mobile screen*/ creates the height of the header when viewed on mobiles.

      I hope that helps.

  4. This worked for the "computer screen" and "mobile" views, but it didn't resize my "admin bar" view. I used 50vh for all 3 views. Any suggestions or insights? Thanks.

    1. Moi,
      I just re-tried the code and with the admin bar showing the header height on the home page, the header height on the front page does reduce. Can you use the help link on the top menu to send me your admin login details... so that I can look into it?

  5. Hiya - I'd like the top of the image to align to the top of the page - on the home page it seems to be aliged differently to the rest of the pages - do you have any idea how I can make sure the header image aligns to the top of the page?

        1. Bertie,
          The following CSS should align as the home page but the height of the header may have to be increased, or the image re-designed:

          .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
          position: fixed;
          }

  6. Just a heads-up for others here... I used the CSS from this post to reduce the height of my 2017 header image... it worked great! Then two days later, I started having problems with the header image on ALL pages... after a refresh, I'd get a huge white space beneath the header image the size of the original full page image. It turned out to be a conflict caused by a plugin... Above The Fold Optimization by PageSpeed.pro... The problem was NOT the CSS provided by Bharat... it was the plugin. Thanks, Bharat!

  7. If you like to close the information like this, you'd better not. You are pushing people's personal information open. And because of you article occupies the google search, people can't access the appropriate information.

    1. Hello wonho,
      I do not understand your comment. Can you please clarify?
      However, with my interpretation, personal information here is posted by users themselves in the comments section. I mention people's names in my replies to these comments as I prefer to address people by their name.
      As it says on the posts, the customisation instructions are for subscribers.

  8. Hi, how can you set the same header size on all other pages? Because by default when switching to another page other than "home", the header is reduced too and the change is not very aesthetic.
    Thanks in advance

          1. Hello Bharat, Thanks for posting this, it's extremely useful. However, I have the exact same issue as Paula. I use the code you provide above to reduce the size of the header on the front page. I have not modified the code for the other pages, which means I use the theme's standard code. I will send you the url of my site via the 'Ask for help' link. I hope you can help! Many thanks.

              1. Hello Bharat, thanks for answering so quickly. However, your suggestion does not solve my issue: by changing the padding, your above suggestion moves the name of the website about on the header image, but it does not make the header image of the front page the same size as on other pages, nor does it mage the image look exactly the same on the front page as it does on the other pages: the part of the image visible on the front page appears to be cropped and 'zoomed' (enlarged) differently than on the other pages.
                To be honest, all I'd like to do is to be able to use exactly the same template for the front page as for the other pages, I don't want the front page to look different. Thanks.

                1. Astrid,
                  The code for the header of the main front page is different to that of other pages and posts. It's too different for me to create a quick customisation at the moment but I will look at it when I have a quality moment. In the meantime, can you try posting your requirement on the Twenty Seventeen support forum here: https://wordpress.org/support/theme/twentyseventeen/
                  If you get a reply that works, can you post it here so that others can use it?

  9. Hi Bharat,
    Thanks for your site - I've found a lot of useful info to help me with my Twenty-Seventeen customisation.
    I do, however, have a question. In fact, it's virtually the opposite of Andreas Anderson's question of 15 Feb 2017. So far I've successfully removed the Front page sections on my customised Twenty Seventeen "child" as I didn't want them. What I'd like to do now is make all pages on the site look like the "static" Home page. I.e. transparent background with a semi-transparent "content-area" so the background image is fully visible as it is on the home page. Is this possible? Thanks for your advice.

    1. Hello Alan,
      Can you clarify how you are setting the transparency and background image that you are referring to?.., and/or send me URLs with descriptions so that I can look at what you are referring to?
      Thank you.

      1. Hi Bharat,
        With Twenty Seventeen out of the box the home (front) page has a white background menu some way down the page with the background image fully visible above the menu. Below the menu the "content area" has a semi-transparent background with black (or near black) text. On all "non-home" pages the white background menu is considerably higher up the page with only a relatively small portion of the background image visible. The "content area" on these other pages (i.e. all pages except for the home page) has a solid gray background with black text. I have tried, but have been unable to target this background in the css to make it semi-transparent like the home page is. Can you assist? I.e. by providing the location in the style.css file that refers to the background color/transparency for all non-home pages.
        Thanks, Alan.

        1. Hello Alan,
          I started with a development version of the theme which I customised, then installed the released version but keeping the customizations, and so I have not experienced the out of the box theme. However, this http://2017.wordpress.net/ may be the default theme. If it is then the home page has the content "Welcome to Needle & Hook Coffeehouse!" under the menu but can you clarify what you are referring to when you mention the semi-transparent area?

          Now, for non-home pages see http://2017.wordpress.net/contact/, and again, can you clarify what you are referring to when you mention the solid grey background area?

          1. Apologies for the confusion. As mentioned earlier, one of the first things I did was to remove the front page sections on the site I am setting up for a friend. The url is: http://www.lenkawagner.com. As a result I ended up with the front (home page) at the url provided. If you look at any of the other pages you will see a white background below the menu with a "gray" content area. I would like all the non-home pages to look like the home page. I.e. fully transparent background below the menu, with a semi-transparent content area. It is probably something as simple as finding the correct background css elements for the non-home pages in the style.css file. Now you have the url hopefully you understand what I am asking. Thanks.

            1. Hello Alan,
              I can see what you are referring to now, but I am confused as to how these grey areas have been created. I cannot find a setting in the theme to do this. Have you created these grey areas?
              If not, then can you send me the admin URL, username and password, suing the 'Ask For Help' link on the top menu, and I can look into it?

  10. Thank you very much for the info! However I was wondering if you have any tips as to how one would make the front pages header (and img) look just like the other pages?

    In the front page the custom-header-media uses position attribute "relative" but the rest of the pages has the "absolute" property.

    What I'm most interested in is finding out is how to edit the PHP in order to make the static front page a "regular" page

    Would appreciate your response a lot!

    1. Hello Andreas, can you send me two URLs. 1) of a front page with a static page and 2) of a normal page? Let me know what the difference is and how you want them to be the same. You can use the Ask For Help link on the top menu.

  11. Hi Bharat, thanks for the code! Is there a way to also change the sizes of the large headers underneath the main header in the front page? I'm in static page and have three header sections on my front page that I'd like to be the same size. Thanks!
    jkyates.com

  12. Hello Bharat, your code worked wonders. I also tried out different percentages (50% and 75%, as I'm a total novice in installing & using WordPress) to have different heights, However I wanted to ask you one more thing...I would love to reduce the space that WordPress 4.7 provides for the header image. Example...actual reccomended image size (and space, I guess) is 2000 x 1200 pixel. I would love to have 2000 x 900 or 800 pixel. In that case I must change the code inside the .php files or what? Thanks in advance for your reply, bye.

    1. Hello,
      Someone else asked a similar question and I suggested to simply create your image at 2000 pixels wide and then whatever height you want, and then locate it at the top of a blank canvas of 2000 pixels x 1200 pixels. This way you are still using an image fo 2000x1200 but your image resides only at the top with a blank canvas underneath.

      1. Thanks for your reply, Bharat. As we're talking about the header image...is there the possibility to add a slider (and display multiple images) to this theme in the header section?

  13. Hi Bharart,
    this doesnt work for me. I already have headaches because of a day spend trying to figure out how to reduce the height of the home page header image. Can you please help me ? The code u provide has no effect in default (20-17) theme style.css, nor in its child theme style.css. What I could have been missing ?
    Thanks in advance for any help

    1. Hello Jan, I had a look at your site and the header is reduced and it seems you have resolved the issue. If not, use the 'Ask For Help' link at the top of the page to send me the admin URL, username and password, so that I can look into it.

  14. Sir,

    Thanks for your work but if i have one query. if I use a header of one third height i.e. 400 px or whatever height is set then it should display the image but it first expand it to 1200 px then display the one third of that image which do not serve the purpose of reduced height.

    Thanks & Regards,

      1. Sir Bharat, sorry i'm working on localhost as i have just started work. I have deployed wordpress 4.7.1 ... latest theme and write your code in custom css ... it has reduced the height overall height but complete image is not appeared. If I load an image of smaller height i.e. around 400 px then it should display the image as it is but it first expand the 400 px image to 1200 px and then display the upper one third of the image. I just want to show the smaller height image as it is as on standard websites. Thanks & Regards,

        1. Hello Maria,
          I believe I know what you mean and I am not yet sure where this setting is coded. In the meantime, can you try simply putting your desired image on a canvas size of 2000x1200 pixels, so that it fits the whole 2000px width and is at the top of the canvas?

          1. oooh yes ... gr8 idea ... entire canvas of 1200 pixel ? .... top 400 on my actual image and remaining is empty ... thanks sir ... let me try what it does ... one more thing sir ... what should i do if what to other featured on other section of home page ... as on all other section wordpress using the same 1200 height ... can i use 400 pixel image there as height of those images are same as 1200 px even after using your code ... thank you very much sir for your sharing ...

  15. Hello all,
    The code has been updated now so that it works when you have the static front page set as "Your latest posts", and also when it is set as "A static page".
    The setting is in In WordPress Admin > Appearance > Customise > Static Front Page.

  16. Code works great, only I've just noticed that when I access site by mobile and start scrolling down the homepage, the header image somehow gets a little bigger, as it was automatically resizing on my scrolling down. In my opinion, this interferes a bit with the smoothness of user navigation. However, this is just a minor issue, so thank you again.

    1. I just tested the header image with and without the code and it get's slightly bigger with the default Twenty Seventeen settings. This seems to a an issue with the theme itself. I have tried it on an Android phone using chrome. It would be good to see how it performs on different OS's and browsers. Please let us know here.

  17. Works great! Thank you! That was exactly what I was looking for, though I was not able how to code it myself. Just one thing: does "Computer screen with logged in user and admin bar showing on front end" refers at what I see when I log in as wp-admin?

    1. Hello Bastian, try putting the code into WordPress Admin > Appearance > Edit CSS. and then save and publish that.
      If that does not work then use the ask for help link on the top menu to send me your WordPress admin url, the admin username and password, and I can look into it.

      1. Hi Bharat, i created a blank WordPress installation (4.7.1) and entered the code via the Customizer. Even here it does not work. The header of the start page is always 100%. Can you check that on this way also briefly?

  18. Hi Bharat. Could you explain how to change the headers height on pages? It's a quite extreme landscape format and difficult to place images. I'd like to increase the height. Thnx and Best from Berlin.

    1. Hello tiborbogun,
      The following CSS allows you to change the padding above and below the logo, title and description in the header. The values of the padding are in pixels.


      /* for mobiles */
      .site-branding {
      padding: 100px 0;
      }
      /* for larger laptop and computer screens */
      @media screen and (min-width: 48em) {
      .site-branding {
      padding: 200px 0;
      }
      }

      Please note that the padding is also applied to the front page, and lower values will not effect the height of the image section on the front page. I will look into only applying the padding to single posts and pages when I have a moment.

    1. Hello Martial,
      I tried the again and it works here. If you use the Ask For Help at the bottom (now at the top) of the page and send your WP-ADMIN login details then I can look into it for you.
      And yes, the code also works with the video header.

      1. I went to style.css and was unable to find where any of that code is. What section was it in? Or what section should I be adding it to? Should I be adding it to a new file? Am I totally missing something. Can this be done on my own private site? Please Advise...Thanks

  19. I like this theme, but I hate the way that if makes the featured image to large above the fold. Other than going through every single post and resizing the image, is there a way of making it less tall automatically?

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Do NOT follow this link or you will be banned from the site!