Twenty Seventeen Theme Customisation
Twenty Seventeen is the default 4.7 WordPress theme for 2017. Register for and request customisations here.

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

Updated: July 1, 2017 Posted: November 11, 2016~ 15,944 Readers ~ 1 Minute Read 72 Comments >>

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:

Get instant access to this customisation, and more.

Join the member's area for free and receive your login by email for:

Twenty Seventeen theme customisations.
Salient theme customisations.
Other WordPress customisations.
Grow A Business Online forums.

Free membership for customisation and growing a business online is only available for a limited period.

Not a member?.. Register for free below.

Your login will be emailed to the address you enter above.
Your privacy is respected, and there is no spam.



There are 72 comments to the above post [Read comments].
Click here to comment, ask or share something.

72 Comments

  • Stupoticus says:

    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/

    • 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.

  • Moi says:

    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.

    • 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?

  • Hello, anybody a idea how can i make the videoheader appear on mobiles? itskharizldalodo.com. Thank you very much from Germany.

  • BertieB says:

    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?

  • Doc Sheldon says:

    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!

  • wonho says:

    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.

    • 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.

  • Paula says:

    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

  • Alan Ampna says:

    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.

    • 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.

      • alan Ampna says:

        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.

        • 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?

          • Alan Ampna says:

            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.

            • 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?

  • Andreas Andersson says:

    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!

    • 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.

  • Josh says:

    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

  • Invictus says:

    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.

    • 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.

  • 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

    • 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.

  • Maria says:

    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,

    • Hello Maria,
      Can you send me the URL of where you are having the issue?

      • Maria says:

        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,

        • 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?

          • Maria says:

            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 ...

  • 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.

  • Agus says:

    Hi Bharat, I have followed the steps, but has no luck. Also put the code on the child theme, still no luck. What did I miss? Thank you.

  • enrp2013 says:

    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.

    • 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.

  • enrp2013 says:

    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?

  • Bastian says:

    Is it possible to get the code working also on the mainpage? Actually it only resize the header on a singlepost/page.

  • tiborbogun says:

    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.

    • 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.

  • Martial says:

    Hi,
    I tried with no result, but is this works with video header too ?

  • Dick Hicks says:

    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?

Comment, ask or share something...

%d bloggers like this: