[Resolved] Small responsive header image problem

[Tony]

Hi Tom, thanks for such an awesome theme! I had been having a lot of troubles trying to get my temporary header background image to be responsive and to look the same on desktops, laptops etc., and in looking through the forums I saw where you explained why background images have difficulty with that. So I tried just putting an image into the wp_head hook and that solved it.

But it added a new problem that I haven’t been able to solve – it adds a small white space between the bottom of the image and the top of the menu. I have Layout Header padding set to 0.

You can see it at http://amysciostaging.com/

I’m sure there’s a simple fix, I just haven’t been able to find it.

regards,
Tony

[Tom]

Hi Tony,

wp_head is for scripts only – not HTML.

You’ll want to place it in “Before Header” for a similar result.

Let me know 🙂

[Tony]

Hi Tom,

Thanks, I moved it to “Before Header” but it still has the white space between the image and the top of the navigation bar.

Is there something I can add to my image code or somewhere else that will remove the space?

Regards,

Tony

[Tom]

Try moving it into the “Before Header Content” hook, then add the CSS in this post: https://generatepress.com/forums/topic/problem-with-header-image/#post-208300

[Tony]

Thanks Tom,

That does indeed work but it still has the few pixels of white space under the image.

regards,

Tony

[Tom]

Add this CSS as well:

.inside-header img {
    vertical-align: bottom;
}

[Tony]

That did it! Thanks so much!

Tony

[Tom]

You’re welcome 🙂

[Author]

Posts