How to Change Header Height in WordPress

Where you change this depends on how your header was built. If you are on a block theme the customiser handles it, if you are on Elementor it is in the header template, and if neither of those works a few lines of CSS will do it. All three are below with the code you can copy. If you would rather have this handled for you, we offer WordPress website design.

The header is one of the most important parts of a WordPress website design, as it usually contains the logo, menu, and branding elements. If the header is too big or too small, you might want to adjust its height. You can change the header height using the WordPress Customizer, theme settings, or custom CSS. You might also find how to add custom CSS in WordPress useful.  Here’s how:

Change Header Height Using WordPress Customizer

Some WordPress themes allow you to adjust the header height through the built-in WordPress Customizer.

Steps

1. Log in to your WordPress dashboard.
2. Go to Appearance > Customize.
3. Look for Header, Header Settings, or Layout Settings (this option varies by theme).
4. Find the Header Height setting (if available).
5. Adjust the height using the slider or input box.
6. Click Publish to save changes.

Change Header Height Using Theme Settings

Some premium or custom themes have a separate theme options panel where you can change header height.

Steps

1. Go to Appearance > Theme Options or Theme Settings.
2. Find the Header or Layout section.
3. Look for an option to set the header height.
4. Adjust the value and save the changes.

If your theme doesn’t provide this option, you can use custom CSS.

Change Header Height Using Custom CSS

If your theme does not allow you to adjust the header height directly, you can modify it with CSS.

Steps

1. Go to Appearance > Customize > Additional CSS.
2. Add the following CSS code:

.site-header {
  height: 120px; /* Change this value as needed */
}

3. Click Publish to apply the changes.

If the header still doesn’t adjust, try using min-height or max-height:

.site-header {
  min-height: 120px;
  max-height: 150px;
}

To find the correct CSS selector for your theme, right-click on the header, select Inspect (in Chrome/Firefox), and check the header class or ID.

Change Header Height Using Custom Code (functions.php – Advanced Users)

If you are comfortable editing code, you can modify the header height through your theme’s functions.php file.

Steps

1. Go to Appearance > Theme Editor.
2. Open the functions.php file.
3. Add or modify this function:

function custom_header_height() {
  echo '<style>.site-header { height: 120px; }</style>';
}
add_action('wp_head', 'custom_header_height');

4. Click Update File to save the changes.

Changing the header height in WordPress is simple if your theme provides built-in options. If not, custom CSS is the best solution. A reliable website support company can help ensure these changes are implemented correctly and checked across mobile and tablet views to maintain a good user experience.

Would rather someone just did this for you?

We look after WordPress sites for businesses across Ireland, from one-off fixes like this to full monthly support. If you would rather not be in the dashboard at all, that is what we are for.

See our WordPress support plans