Premium Theme Support › Anariel Design › Didi

Reduce header image height

  • Author
    Posts
  • #138467
    seaudlab
    Member

    Hello,

    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)

    #138468
    anarieldesign
    Theme Author

    Hi,

    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,
    Ana

    #138478
    seaudlab
    Member
    Original poster

    Thank 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.

    #138503
    anarieldesign
    Theme Author

    Hi,

    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,
    Ana

    #138505
    seaudlab
    Member
    Original poster

    This 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.

    #138585
    anarieldesign
    Theme Author

    Hi,

    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,
    Ana

    #138660
    seaudlab
    Member
    Original poster

    Yes – this is what I wanted to do. Thank you very much for your help.

    #138698
    anarieldesign
    Theme Author

    You are welcome :)

  • The topic ‘Reduce header image height’ is closed to new replies.