You can change the PHP code for the Custom Header function located under your Appearance Menu, in your child themes functions.php file around line 42 however you will then need to change the CSS values for your header to match these in your child themes style.css file as well.
The values in this code have been changed from 90px height and 380px width to 1140px width by 200px height.
//* Add support for custom header
add_theme_support( 'custom-header', array(
'default-text-color' => '000000',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 200,
'width' => 1140,
) );
Style Sheet
Change the value for the height of your header image ion Line 1173. This example has been changed from the default 90px to 200px.
.header-image .site-title a {
background-position: center !important;
background-size: contain !important;
float: left;
display: block;
min-height: 200px;
text-indent: -9999px;
width: 100%;
}
You can then remove the top padding above the header image by modifying the values on Line 1106 of your child themes style.css file:
.site-header {
padding-top: 30px;
padding-top: 3rem;
}
To remove the padding below your image, change the values on Line 1193
.header-image .site-header .title-area,
.header-image .site-header .widget-area {
padding: 30px 0;
padding: 3rem 0;
}
On Line 1111 you’ll find the code for the site header wraps bottom border which you can also remove:
.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}
Mobile Responsiveness
See the reply to Bob’s question which includes CSS for Media Queries in the comments below.
Was This Tutorial Helpful?