Header Sizing Issues

Hi @sarahdfly, Would you be able to link your website?

There’s very little to see.
Ignore actual text and images. I’m just creating a framework to show the trustees for approval before putting in the hours transferring content from the current site.
https://www.version2.chaffinch.org.uk

Let’s start with getting the logo the same size.
If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:

1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
3. (put this code in)

   
   .custom-logo-link img {
       max-height: 200px;
   }
   

4. Save

Alternatively use your Child Theme style.css file to hold your CSS modifications

Thanks. I’m not using a child theme. It’s just a straightforward install of twenty seventeen.
It’s got a CSS modification section so that makes it easier!

That’s sorted the logo. Great.

I’m sorry I couldn’t figure out how to make the header the same size as the Front page on other pages. If someone else wants a try, here’s my attempt: https://pastebin.com/Bzy5EiRw

Andrew, thanks for putting in some work on this and you’ve sorted my logo issue which is great.
I admit to being a little confused as to why the theme requests a 2000 x 1200 header image but then doesn’t use that size for the majority of headers, but I’m sure the theme developers had their reasons! Perhaps if I make my static image an image of two ‘halves’ so it makes sense both as a whole and with only the top half visible…hmm, will have to play around…

Maybe it is better that there is another hero image option for the header, to reduce unnecessary bandwidth use and help you display the correct portion of the image. This has been raised before.

Where in the dashboard is the option to upload a header image in the theme? Sorry I haven’t installed it myself but I can potentially help with adding a new image field.

@anevins, I agree. I think having a separate option would be a better (and cleaner) solution.

Uploading the header image is in Appearance – Header – Header Media. That’s the location where both the header video and the static image are uploaded.
The static image uploaded there would still need to exist as it replaces the video on mobile devices and slow connections.
But perhaps an alternative could be defined for the other pages?
Guessing I’d need to set up a child theme…

I was wondering if anybody has a solution yet for the header-problem.
Tried several things (also the css-trick from other topic) but no succes.

I want to have a good header on all pages, not only the mainpaige. The css code works a bit,but makes the image ugly.

If there is another way,please share.

Addon:
On my Ipad the header is not cropped when I use it upright. Horizontal it does.

The header image being so large on the main page and so thin on all subpages (i.e. actual blog posts) is bizarre, without a clean way to deal with this.

Do you think WordPress will update the theme to solve this or should I figure out some other plan?

@astroknot I don’t actually mind the difference as I think it’s nice to have a large image when someone first accesses the site, but then the smaller header doesn’t detract from the content on the other pages. However, there should be an option to choose different images because, at the moment, the small, thin headers turn out to be a weird crop of the large image which looks ridiculous.
I’m playing with the code but having difficulty adding a second header in my child theme. Something in the main theme seems to be over-riding my changes but I can’t locate what it is.

I agree – just having the option for main header image & smaller header image should be clear. I’ve tried making the main header something that looks good cropped like that but it’s really hard! Needs to be an option in the main theme settings…. I don’t trust myself enough to figure out parent/child pages yet ??

I just posted a hack: See https://www.ads-software.com/support/topic/static-page-header-on-all-other-pages/#post-8698710