Support » Theme: Leaf » resize header image

  • How can I do for resize the header image? I want to enlarge it.
    Actually I tried to change width and height parametres on custom-header.php but it doesn’t work.
    I need the header image take all the header space.



Viewing 15 replies - 1 through 15 (of 24 total)
  • Me, too. I’ve done exactly the same but it doesn’t work.

    Please provide a link and I’ll look into this further. Thanks 🙂

    [link deleted – please stop posting that]

    Thank you very much but, sorry, I can’t provide a link because it’s a test site and I don’t want the URL to be public.
    In the end I managed to put the full width image in the header, adjusting via CSS, but the problem is that site title and description disappear.
    So, I’ve done a large image with the title and the description inside, near the logo image, but when I finally managed to position it as I wanted, and the result was good, I realized that the mobile version is cut, because the theme has a logo max 300px wide, not a full width one, so I had to remove everything again.
    I don’t know what to do, if not create a logo that includes the title, description and image that fit all into 300px, but I haven’t tested it at this time. It would be ugly anyway, ’cause in that way there’s a lot of blank space on the right side.
    What a pity, it’s an almost perfect theme for me, and the only one I found with nextgen slideshow and pictures lightbox visible also on mobile!
    I don’t understand why the author has messed up so much with the header, and why he doesn’t left the normal custom WordPress header.
    It seems divided by div and/or table and I can’t find no way to clean it up.
    It would be easy and quick, instead of wasting so much time for a thing like that, the header, the first thing in a site. I’ve lost a lot of hours, yesterday.
    If you want and if you have time, I can provide you the demo theme link, header’s CSS are the same I guess, so you can see the original one.
    Thanks for your attention

    Solved with an image of 980×190 with custom CSS:
    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 70px;max-width:200%;float:left;}
    (float:left; in my case is only to keep the bottom of the image attached with the top border of menu).
    In that way is good on desktop site as before, but also in mobile one, with the difference that logo on the right isn’t visible, but at this point I don’t care, the important thing is that site title and description are visible.
    Maybe it’s not ideal, and I don’t know how is in a mobile smaller than Samsung II, or bigger, but that’s it.
    If anyone has better solution pls let me know

    Of course, values in padding and max-width can be changed according to the requirements
    Also, I noticed that you don’t have to click on “skip cropping, etc..” but on “crop, etc…” selecting complete image if you want it wide as it is.

    Have you indicated the image size percentage in CSS?

    For my header image worked:

    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 40px;max-width:190%;float:left;}

    Now image is 909×176

    I also need to change my header size using the same theme. Where exactly did you go? I can’t seem to find .site-header.
    I do wish this developers would provide a quick how-to!

    Moderator Andrew Nevins


    Front-end developer

    Put it in the “Custom CSS” section of the dashboard.
    If that doesn’t exist, download and install this plugin – Then use the Custom CSS Manager section of the dashboard.

    Hi Andrew, thank you for such a quick response. I now have custom CSS but still no change. I have also gone via Appearance – Editor – custom header.php and changed width and height.
    What am I doing wrong? Ideally I would like my logo to stretch the full width.

    Moderator Andrew Nevins


    Front-end developer

    I don’t think you’re editing the correct section of the dashboard, make sure you find a section named “Edit CSS” (from Jetpack plugin) or something like “Custom CSS”.

    🙁 hi, I now have a big nasty black bar across the top telling me to save or all will be lost. I have saved but nothing so deleted the code and saved again.
    I went to CSS stylesheet editor, deleted ‘Welcome to Custom CSS’ and added this:
    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 70px;max-width:200%;float:left;}
    . . . as suggested by Tizz
    Why and what to do?

    Moderator Andrew Nevins


    Front-end developer

    Can you provide a link to the webpage with the issue?

    @ Caroline Ian
    You don’t have to install a plugin. You must only go in Custom CSS in your Leaf Options in the backend and try a thing like this:

    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 50px;max-width:200%;}

    In this way you see your logo enlarged till more or less the start of your superior header menu
    The padding: 0.1rem is to limit height

    You can take a look on how it is on my website, and you can surely have help to further customization using a tool like Firebug.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘resize header image’ is closed to new replies.