How to change Header Height

I guess you can try to change the (max) height but this might be complicated in that the height of the header changes depending on the width of the browser window. At a small width the menu will be below the logo rather than to the right.

You can set the padding to smaller values in the Editor.

For the Header you should see a row block. If you select the row you should then be able to set the padding for each side of the block to make it smaller.

I have noticed that you can only set simple values here with a number and unit (e.g. 1em).

In the header template part you have something more complicated like this:
padding-bottom:var(--wp--custom--spacing--large, 8rem)

I don’t hink you can enter complicated expressions like these with the Editor, you would probably have to edit the template via a custom or child theme or use custom CSS.

• This reply was modified 2 years, 6 months ago by MaxD.

Thanks @max-dayala MaxD That did not seem to work. I have a child theme active and have copied in the header-default.php and modified.

I have modified the code in this file to the code below but no matter what I change the padding on the site does not change Development site is at: https://sjcyfc.bleupelikan.com/

header-default.php contents:

return array(
	'title'      => __( 'Default header', 'twentytwentytwo' ),
	'categories' => array( 'header' ),
	'blockTypes' => array( 'core/template-part/header' ),
	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--small, 1rem)","top":"var(--wp--custom--spacing--small, .25rem)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
					<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--small, 1rem);padding-bottom:var(--wp--custom--spacing--small, .25rem)"><!-- wp:group {"layout":{"type":"flex"}} -->
					<div class="wp-block-group">
					<!-- wp:site-logo {"width":64} /-->

					<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
					<!-- /wp:group -->

					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
					<!-- /wp:navigation --></div>
					<!-- /wp:group --></div>
					<!-- /wp:group -->',
);

If anyone can help it would be appreciated. I am trying to eliminate almost all vertical spacing on the header. Attached is a link to an image I have marked up showing the 3 images I am trying to reduce. I have tried numerous fixes to code in numerous areas but can’t seem to get it to change. Areas 1, 2 & 3 need to be reduced to almost nothing in the area of the arrows. I am using a child theme so I can put changes into any place you might recommend. I am really lost on this. Block themes are not as friendly for me as I expected them to be.

Please HELP. ??
Thanks,
Greg

https://sjcyfc.bleupelikan.com/header-issues.jpg

If the updates to that file are not showing then maybe some changes have already been made to the header template in the editor. Since changes made in the editor are stored in the database, any changes subsequently made to the corresponding template file won’t have an effect.

You can check this by going to the Editor and then selecting “Template parts”.

In the list of template parts you should see a “Header” template.

Look at the “Added by” column and see if there is a blue dot on the icon. If so there will also be a 3 dot menu to the right. Clicking that menu will give you an option to reset the changes that have been made in the editor.

Obviously if you do reset the changes they will be permanently lost. Hence, unless you can remember what changes you have already made you might want to do an export of the templates first.

If you go the Editor -> Site screen and click the top right 3-dot menu you will see an Export option under Tools about two-thirds of the way down the menu. Click on this and you can save the theme files to disk. You can compare these against the original versions from the parent theme, although the export does rewrite some characters in a different format.

(Incidentally, if you look under the “parts” folder you will see the header.html template file.)

Thanks @max-dayala

I will work on this and see what I can get done. So far I have gotten it to reduce a bit, which is better than nothing.

I so appreciate your detailed instructions.

Thanks again,
Greg

I found this thread because I had the same problem. I solved it by deleting the default header the template loads with in the block editor, and then adding a new header block in it’s place. The one I added is considerably more compliant so far.

I find the fact that this worked for me somewhat hilarious ??