[Resolved] header image issue

Home Forums Support [Resolved] header image issue

Home Forums Support header image issue

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #271152
    Ria

    Hi, I’d like to achieve something like this with the header: http://whydogseatgrass.com/.
    However, no matter how I configure it, either it doesn’t scales down the image or instead of scaling just hides the right side or doesn’t fit and I start seeing the background color below or on the side.

    I’d like to have an “attached” menu which moves with the lower end of the image when I scale down, and I want to still show the whole picture just smaller if the screen is smaller than the image itself.

    How could I do that?
    Thanks!!!

    GP Premium 1.2.94
    #271186
    Ria

    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!!

    #271187
    Leo
    Staff
    Customer Support

    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.

    #271193
    Leo
    Staff
    Customer Support

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

    #271339
    Ria

    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!!

    #271352
    Leo
    Staff
    Customer Support

    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.

    #271353
    Leo
    Staff
    Customer Support

    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"/>

    #271379
    Ria

    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!

    #271384
    Leo
    Staff
    Customer Support

    Try this CSS:

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

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

    Let me know.

    #271390
    Ria

    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!!!

    #271395
    Leo
    Staff
    Customer Support

    You’re very welcome! Appreciate the kind words.

    Consider leaving us a review if you haven’t already done so πŸ™‚

    #2065315
    Thomas

    Hi, I’m using the catalyst theme with the default header settings. I input a custom image 1400×400 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!

    #2065538
    David
    Staff
    Customer Support

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.