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.

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.

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

Originally published at Bharat Karavadra.