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

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:

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


Comments

82 responses to “How To Reduce The Header Height Size Of The Twenty Seventeen Theme Front Page”

  1. Jamal avatar
    Jamal

    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. Bharat Karavadra avatar

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

    Wonderful, at least, the header image is displayed at a correct size for mobiles, thank you so much Bharat !

  3. Audrey Pirih avatar

    hello,
    i can’t log in order to access to the content, as my email address is rejected : ” Please enter a valid email address ”
    (i’ve been trying gmail or hotmail.fr emails)

    1. Bharat Karavadra avatar

      Audrey, Can you give me the name and email address that you are trying, so that I can enter them here?

      1. Bharat Karavadra avatar

        I entered your first name and email address and it subscribed OK. You should receive an email from support@karavadra.net with further instructions. Check your spam folder if the email is not in your main inbox folder.

  4. Kathy avatar
    Kathy

    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.

    1. Bharat Karavadra avatar

      Kathy,
      Try Appearance -> Customise then Additional CSS at the bottom of the left menu. Enter the CSS code into the text area appears.
      Entering the CSS into the style.css should work however if you are using only the parent theme then updates to the theme will override the changes, so use a child theme instead. See here for how to create a child theme: https://codex.wordpress.org/Child_Themes

  5. Samuel avatar
    Samuel

    Hello Bharat,
    I tried this with no result at my site http://www.samuelskantz.se

    I put the code in the Edit CSS-field, but nothing happened. Any ideas why?

    1. Bharat Karavadra avatar

      Samuel,
      Can you use the Help link on the top menu and send me an admin login so that I can look into it?

  6. Stupoticus avatar
    Stupoticus

    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. Bharat Karavadra avatar

      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.

  7. Moi avatar
    Moi

    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. Bharat Karavadra avatar

      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?

  8. johannesendresjohannes avatar

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

  9. BertieB avatar
    BertieB

    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. Bharat Karavadra avatar

      Bertie,
      The home page here https://tryit.tv/twentyseventeen/ has a header image where the top of the image is at the top of the page, and here https://tryit.tv/twentyseventeen/html-elements/ is a page where the top of the header image is not at the top of the page (see position of the balloons). Can you send you the URL of your site so that I can see your installation?

        1. Bharat Karavadra avatar

          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;
          }

          1. BertieB avatar
            BertieB

            thanks so much

            1. Bharat Karavadra avatar

              Bertie,
              I’m glad that worked for you.

  10. Doc Sheldon avatar

    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!

    1. Bharat Karavadra avatar

      Doc,
      Thank you for the information and I am glad that my code works OK.

  11. wonho avatar

    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. Bharat Karavadra avatar

      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.

  12. Paula avatar
    Paula

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

        Thank you, its ok. The only problem is that the image changes from start to other pages.
        In these pictures I show you the example.

        Home page:

        https://tlgur.com/d/x4rjlpz4

        Other page:

        https://tlgur.com/d/Y8njDAY8

        1. Bharat Karavadra avatar

          Hello Paula,

          Can you use the ‘Ask For Help’ link on the top menu to send the precise code you are using for both the home page header and for the other pages, and also the URL to your site?

          1. Astrid avatar
            Astrid

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

                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. Bharat Karavadra avatar

                  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?

                  1. Astrid avatar
                    Astrid

                    Hello, thanks for this suggestion. And yes, will do.

  13. Alan Ampna avatar
    Alan Ampna

    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. Bharat Karavadra avatar

      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. alan Ampna avatar
        alan Ampna

        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. Bharat Karavadra avatar

          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. Alan Ampna avatar
            Alan Ampna

            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. Bharat Karavadra avatar

              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?

  14. Andreas Andersson avatar
    Andreas Andersson

    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. Bharat Karavadra avatar

      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.

  15. Josh avatar

    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

    1. Bharat Karavadra avatar

      Hello Josh,
      The panel images on the home page can be reduced in size. See here: https://karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/

  16. Invictus avatar
    Invictus

    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. Bharat Karavadra avatar

      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 2000×1200 but your image resides only at the top with a blank canvas underneath.

      1. Invictus avatar
        Invictus

        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?

        1. Bharat Karavadra avatar

          Hello,
          That would be more than any customisation I can do here. Can you look through the plugin directory here https://wordpress.org/plugins/ to see if there is a plugin that can replace the header on WordPress themes?

  17. Jan Prochazka avatar

    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. Bharat Karavadra avatar

      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.

      1. Jan avatar
        Jan

        Hi Bharat,
        yes, I finally resolved it, thank you for your reply and for sharing your knowledge.
        Have a nice day

  18. Maria avatar
    Maria

    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. Bharat Karavadra avatar

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

      1. Maria avatar
        Maria

        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. Bharat Karavadra avatar

          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 2000×1200 pixels, so that it fits the whole 2000px width and is at the top of the canvas?

          1. Maria avatar
            Maria

            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 …

            1. Bharat Karavadra avatar

              Maria,
              Can you clarify your message?

  19. Bharat Karavadra avatar

    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.

  20. Agus avatar

    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.

    1. Bharat Karavadra avatar

      Hello Agus,
      Use the Ask For Help link on the top menu and send me your WordPress admin login url, username and password and I can look into it.

  21. enrp2013 avatar

    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. Bharat Karavadra avatar

      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.

  22. enrp2013 avatar

    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. Bharat Karavadra avatar

      Yes, the third section is for logged in users looking at the site.

  23. Bastian avatar

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

    1. Bharat Karavadra avatar

      Hello Bastian,
      The code above is for resizing the header on main front page.

      1. Bastian avatar

        Hi Bharat, sorry for my late reply. For me this code does not have any effect. I’ve created a child theme, and put your css code into the child style.css (here: http://schwabenpilot.de/). Maybe you can have a look at my side and tell me what i have to do?

    2. Bharat Karavadra avatar

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

        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?

        1. Bharat Karavadra avatar

          Hello Bastian,
          Can you use the Ask For Help link at the top of the page to send me your WordPress admin url, the admin username and password.

  24. tiborbogun avatar

    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. Bharat Karavadra avatar

      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.

  25. Martial avatar
    Martial

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

    1. Bharat Karavadra avatar

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

        Thanks Bharat…worked great …appreciate this share.

    2. Bharat Karavadra avatar

      To get video headers to reduce in size, first ensure that you have a header image set. The video will override the image and the code will work.

      1. Martial avatar
        Martial

        Thanks a lot for your help, that works well :))

      2. Happy avatar

        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

        1. Bharat Karavadra avatar

          Hello,
          You sent a similar question about a week ago. See above where it says…
          In WordPress Admin > Appearance > Edit CSS.
          That is where the code is added.

  26. Dick Hicks avatar

    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?

    1. Bharat Karavadra avatar

      Hello Dick,
      You can reduce the height of the image by a percentage of the height of the screen it is being viewed on. See the link below.
      https://karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/

      1. Dick Hicks avatar

        Absolute legend. Thank you very much. Just what I was looking for.

Leave a Reply to Jamal Cancel reply

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

>