Latest Vantage update broke full width image in header

Open 17 replies customizationthemetheme-vantage
Shinjini Mehrotra
1 year ago · Last reply by Andrew Misplon 1 year ago

Hi,

I was using a custom CSS snippet to display a full-width logo on my website, but that seems to be broken following the latest Vantage update. Could you help, please? Website: https://moderngypsy.in

Thanks!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

17
  1. Andrew Misplon Staff 1 year, 5 months ago

    Hi Shinjini

    Thanks for getting in touch.

    A neat way to accomplish your desired layout would be, if possible, to separate your logo from the background image. You could add your background image via AppearanceCustomizeTheme DesignPageMasthead Background with the Background Image Display set to Cover. At AppearanceCustomizeTheme DesignGeneral you could enable Center Logo. This method will ensure your header is always covered with your background image even if the screen size is larger than the image size.

  2. Shinjini Mehrotra 1 year, 5 months ago

    Thanks Andrew. I don’t see an option to enable Center Logo anywhere. I also don’t see a “General” option under Appearance –> Customize. Is there another way to solve this?

  3. Shinjini Mehrotra 1 year, 5 months ago

    Oh – I found the center logo option, but that doesn’t work. It stretches the logo to a much bigger size than it is.

  4. Andrew Misplon Staff 1 year, 5 months ago

    Hi, thanks for the update. For this plan to work you’d need to separate the logo from the background image. Do you have both files available separately?

    Center Logo is in Theme DesignGeneral, thanks!

  5. Shinjini Mehrotra 1 year, 5 months ago

    If I use the same logo image (with the background), and center it, it covers the entire page, but I now have a white space between the logo and menu bar, which I don’t want. Is there a way to remove that white space, with some Custom CSS, perhaps?

    The logo getting stretched to a much bigger height was when I tried to separate the logo from the background image.

  6. Shinjini Mehrotra 1 year, 5 months ago

    Hi Andrew,

    Yes, I have both files available separately, but like I mentioned, the logo height is getting stretched.

    If I use the same logo image (with the background), and center the logo, it covers the entire page, but I now have a white space between the logo and menu bar, which I don’t want. Is there a way to remove that white space, with some Custom CSS, perhaps?

  7. Andrew Misplon Staff 1 year, 5 months ago

    Thanks for the update. We help wherever possible within our free support scope with existing functionality but unfortunately don’t have the resources to assist with code level customizations. We can within our premium support scope where the budget allows for it. If you could perhaps show us the header with a background image set and a transparent logo centered we’ll take a look at the stretching issue and go from there.

  8. Shinjini Mehrotra 1 year, 5 months ago

    OK – I’ve set the background image and logo. Could you take a look and let me know how to fix the stretching issue?

  9. Andrew Misplon Staff 1 year, 5 months ago

    Thanks. The logo image 1905px wide. If possible, it would be best to trim all the empty space around your logo and then save two sizes:

    – Size A: The intended display size, say 200px wide.
    – Size B: The Retina size for high pixel density displays, this size must be double whatever size A is. In this example 400px wide and whatever the adjusted height is.

    You can then upload Size A to AppearanceCustomizeTheme SettingsLogo and Size B to AppearanceCustomizeTheme SettingsRetina Logo. More info: Page: Logo.

  10. Shinjini Mehrotra 1 year, 5 months ago

    The logo image is 385 by 350 pixels. The Masthead is 1900 by 350 pixels. The height on both these files is the same, so I’m not sure why the height is stretched. This isn’t the case if I don’t center the logo, btw.

  11. Andrew Misplon Staff 1 year, 5 months ago

    Thanks; I see that. Can you please turn off all caching and minimization for the moment so I can see what’s happening a bit clearer.

  12. Shinjini Mehrotra 1 year, 5 months ago

    Done.

  13. Andrew Misplon Staff 1 year, 5 months ago

    Thanks. The layout should present normally if you remove your header and logo related Custom CSS.

  14. Shinjini Mehrotra 1 year, 5 months ago

    I now have white space between the masthead and the menu…

  15. Andrew Misplon Staff 1 year, 5 months ago

    At CustomizeTheme DesignHeader you can set Header Padding to 0. There 25px extra space after that I’ll log an issue for to have resolved in the next update.

  16. Shinjini Mehrotra 1 year, 5 months ago

    Great, that works. Thanks so much for the help!

  17. Andrew Misplon Staff 1 year, 5 months ago

    Super; glad to hear to you’ve made progress.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread