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

Bharat Karavadra
Nov 11, 2016 · 2 min read

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
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
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) {
.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 50vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .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 {
/*height: calc(100vh - 32px);*/
height: calc(50vh - 32px);
}
}

Bharat Karavadra

Written by

I research and share leading-edge information, tools and exercises to help people transform and heal their life situations. See: https://karavadra.net

Bharat Karavadra

Written by

I research and share leading-edge information, tools and exercises to help people transform and heal their life situations. See: https://karavadra.net

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store