Change dimensions of a page header

I’m using separate headers for each page on a website. I would like some of these headers to be only half of a page in height instead of taking the whole page for the header. Can you suggest a way to accomplish this?

Hello there,

You can apply the following CSS code to change the header height on all pages.


.site-header{
  max-height: 50vh;
}

To apply it only on specific pages, use the page ID. So the code would look like this:


.page-id-731 .site-header,
.page-id-732 .site-header,
.page-id-733 .site-header{
  max-height: 50vh;
}

If it is one page, use this:


.page-id-733 .site-header{
  max-height: 50vh;
}

You can find the page ID number when editing your page. In the web address bar, you’ll see something like:

http://yourwpsite.com/wp-admin/post.php?post=733&action=edit

To apply custom CSS code on your site, add it into Appearance > Customize > Additional CSS. Or, you can use child theme’s style.css.

Regards,
Kharis