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!
Latest Vantage update broke full width image in header
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.
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?
Oh – I found the center logo option, but that doesn’t work. It stretches the logo to a much bigger size than it is.
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!
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.
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?
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.
OK – I’ve set the background image and logo. Could you take a look and let me know how to fix the stretching issue?
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.
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.
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.
Done.
Thanks. The layout should present normally if you remove your header and logo related Custom CSS.
I now have white space between the masthead and the menu…
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.
Great, that works. Thanks so much for the help!
Super; glad to hear to you’ve made progress.
All the best.