header image issue

This is the closest I could achieve. http://www.dunwolf.com/
But still I have this issue that it doesn't scale down and not in the center if the screen is smaller.
The edge of the image is the same as the background. If it starts showing the background when the screen is wider, that's fine...

Thanks!!

Hi Ria,

Are you currently uploading the image as a background image?
Background images are not responsive by default.

I would recommend using the page-header addon: https://docs.generatepress.com/article/page-header-overview/

As for sticky navigation, checkout this page:
https://docs.generatepress.com/article/sticky-navigation/

Let me know if this helps.

Actually sorry scratch that. Try using the before header content hook instead :)
https://docs.generatepress.com/article/hooks-overview/

Thanks for the quick response, Leo. I really appreciate it. Could you please help me what code I should add to hook to have a scaling* image in the header which stays at the center? I should add an image to the header instead of using the background image, right?

*by scaling I mean it scales down for smaller screens but once the screen is wider than the image's original width it just stays in the center and you can see the background color on the sides filling the space.

Many thanks!!

Try adding the line below in Appearance > GP Hooks > Before Header Content:
<a href="http://www.dunwolf.com/"><img src="http://www.dunwolf.com/wp-content/uploads/2017/01/wolf2.png" /></a>

Let me know if this works.

If you don't want that image to be linked to the home page like it currently is, then just add this instead:
<img src="http://www.dunwolf.com/wp-content/uploads/2017/01/wolf2.png"/>

Ah, great, thanks. :) Almost perfect. If you could please check now, there is this thin few pixel padding-like thing between the image and the navigation. Do you know what might cause it? It wasn't there when I used the background image instead. Thanks!

Try this CSS:

.site-header {
    line-height: 0px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

Truly amazing. :) Thank you so much. I still can't believe how you can provide support this quickly. I just love this theme. It worth every penny!!!

You're very welcome! Appreciate the kind words.

Consider leaving us a review if you haven't already done so :)

Hi, I'm using the catalyst theme with the default header settings. I input a custom image 1400x400 px. It is cut off on both the right and left showing only the middle portion of the image. Could you advise what I should do to show the whole image on screen? I've played with the settings, but nothing seems to work including scaling down the image. Thank you!

Hi there,

background images are tricky to display 100% of the image, it requires that the Container with the background imafge has the exact same Aspect Ratio as the Original Image. Which can be done in a few ways but requires some tweaking.

Try this:

1. calculate the original image aspect ratio ie. 400px / 1400px * 100 = 28.5%
2. Add this CSS where use that ratio to set its min height:

.page-hero {
   min-height: 28.5vw;
}

3. You may need to reduce the Padding in the Header Element to see the min-height working.

If its still problematic, raise a new topic and share a link to your site and i can take a look.