Last updated on June 26th, 2022 at 11:41 am
The Twenty Seventeen theme comes with a very high header by default which takes a significant amount of space on the pages of your site.
Luckily, thereās a solution to reduce Twenty Seventeenās header height with a couple of CSS code snippets that you can add to your theme. Here’s an example of a reduced header height in Twenty Seventeen.
If you donāt use a picture of a specific size in your header, this guide will help you reduce the blank space in the header area of your theme.
In fact, the same code snippets can be used for making Twenty Seventeenās header even bigger. You just need to play with the numbers in the CSS code until you get the result you need. Hereās what to do.
Reduce or increase Twenty Seventeenās Header Height
1. Log in to your WP Dashboard and go to Appearance > Customize > Additional CSS.
2. Paste the code snippets that follow below and click on the Save & Publish button to save the new settings.
Change the header height of Twenty Seventeen for common computer screens
3. Note that by using this code the change of the headerās height will be valid only for regular desktop/laptop screens.
/* Use this CSS code snippet to modify headerās height for regular desktop or laptop screens */
@media screen and (min-width: 48em) {
.site-branding {
padding: 1px 0;
}
To further optimize the headerās height for mobile devices, add the code snippet from the steps that follow.
Change header’s height of Twenty Seventeen for mobile devices, smartphones and tablets
4. The following code snippet can be used for changing the headerās height for mobile screens such as smartphones and tablets only.
/* Change the headerās height for smartphones and tablets */
.site-branding {
padding: 1px 0;
}
Use both code snippets to permanently change the headerās height for Twenty Seventeen
Paste the two CSS codes one after another in the Additional CSS section of your Twenty Seventeen theme and save the changes to check the results.
Sorry, this doesn’t do anything (and by reading the code, it wouldn’t be expected to).
Hi Helen. Thanks for your feedback. Please note that the code provided in the article is for changing the position of the title of the site.
If you need to change the site logo of your Twenty Seventeen 2017 WordPress theme, use the following code:
.custom-logo {height: 100px;
width: 100px;
}
In order to change the dimensions of the Twenty Seventeen 2017 site header on the home page of your site, use the following code:
.site-header {margin-top: -100px;
}
To change the dimentions of the image of the Twenty Seventeen 2017 site header on the home page of your site, use the following code:
.twentyseventeen-front-page.has-header-image .custom-header-image {height: 120px;
height: 100px;
height: 50px;
max-height: 100%;
overflow: hidden;
}
Let me know if there’s anything else I can help with. Cheers!