Reduce header image height
-
AuthorPosts
-
seaudlab
MemberHello,
I would like to reduce the header image height from 400px (to 225px). Cropping an image to this height does not yield the desired result, as it seems that white space/padding is added around the image to maintain the 400 px default. I want to reduce the total height from menu bar to top of page from 400 to 225. Please advise – thanks very much.
The site is seaudlab.wordpress.com
The blog I need help with is: (visible only to logged in users)
anarieldesign
Theme AuthorHi,
thank you for using our theme.
You’ll need to remove the white space that you have on your uploaded .png image. If you check your image here: https://seaudlab.files.wordpress.com/2019/01/cropped-HeaderImageFullheight-01.png you’ll see the white space above and under your logo, you’ll need to crop this and upload without the white space.
Hope this helps.
All the best,
AnaThank you for the reply, Ana.
I previously uploaded a file without the white space, https://seaudlab.files.wordpress.com/2019/01/HeaderImageFull.png
However, when setting this image as the header image, I am prompted to crop it, with the result as now appearing on the site. The resizable crop area cannot be extended to the full width of the image, and I do not see a way to skip cropping. If I use the image that does have white space built in and crop only vertically, I get the result you saw previously, where white space is maintained above and below cropped image.
So – can you tell me how to display HeaderImageFull.png above the menu (on all site pages) without any additional white space above/below?
Thank you very much.
anarieldesign
Theme AuthorHi,
this is because the image was more than 4000px in width and recommended header image width is 1080px like this: https://dididemo.files.wordpress.com/2019/01/headerimagefull.jpg. After you need to skip crop the image message that will show when you upload your header image.
Hope this helps.
All the best,
AnaThis did help, thanks. However, there is still extra white space appearing above and below the header image. Is there some kind of theme-specific white space padding that I can get rid of?
Thanks again.
anarieldesign
Theme AuthorHi,
yes, there is padding between the logo and top and logo and menu, as it needs to breathe and not to stick on each other. You can use this in the Custom CSS:
.full-size.alternative { padding: 0; } .custom-header { margin: 0 auto 0 auto; } .primarymenu.alternative .site-branding { margin-top: -25px; }
Hope this helps.
All the best,
AnaYes – this is what I wanted to do. Thank you very much for your help.
anarieldesign
Theme AuthorYou are welcome :)
- The topic ‘Reduce header image height’ is closed to new replies.