Hi there,
I am using Vantage Premium theme with a sticky header. On my landing screen there is no gap between header and image. But when i add a SiteOrigin Hero widget in a row on a secondary page, there is a white gap between header and image. Please advise and I am not a developer, so an easy solution via the theme settings, etc would be great if possible thanks.
Hi J
Thanks for posting your question.
You can use the Page Settings section on each page to optionally disable the Masthead Bottom Margin:
Page: Page Settings
Kindly note that Vantage Premium is discontinued but you can migrate to Vantage at any time. If you haven’t modified your theme at a code level you can download the Vantage ZIP file to your desktop via https://wordpress.org/themes/vantage/. Once the ZIP file is on your desktop, it can be installed from AppearanceThemesAdd NewUpload Theme. Footer Attribution and Ajax Comments are the only two formerly premium settings not included.
Thank you for the response but it doesn’t solve my problem on the secondary page.
Masthead Bottom Margin states:
Include the margin below the masthead (header) of your site. If you’ve already disabled the page title and have a slider or banner at the top of your page then this setting is perfect to make it flush with the menu.
My page setup is as follows:
– SiteOrigin Hero widget with image at the top of the page
– Page Attribute / Template setting set to ‘full Width Page, No Title’
– Page Meta Slider / Display Page Metaslider setting set to ’None’
White gap is still occurring. Please advise e.g. need to setup a slider/banner? If so, how?
Thanks,
Hi, thanks for your feedback. It’s hard to say what’a happening without taking a look at the page. Please send a link and we’ll go from there.
Hi Andrew, here’s a link to a sample ie. secondary page where the gap is occurring: https://jhavel.com/gapsample
If you click on the logo (top left) you will see on the home page where it doesn’t occur. Please advise how to setup and remove the white gap on all secondary pages.
I am no developer and please advise specifically where/how within the WordPress editor ie. without any code/CSS. Am happy to answer questions and please ask if req’d :)
Cheers, J
Hi J
Disabling Masthead Bottom Margin should solve the gap in question. Is Masthead Bottom Margin disabled on the page in question? I know you mentioned that it doesn’t solve the issue, is the checkbox disabled at the moment (not checked)?
We aren’t working in the same version of Vantage. Here is how my test setup looks:
Result
Page Settings
Hi Andrew,
My page view doesn’t display ‘page settings’ on the right hand column. I have added an image of my page view which has ‘page attributes’. Go to https://jhavel.com/gapsample and scroll down to view my screen grab. FYI, I am running WordPress 6.6.2.
Please advise and thanks heaps, J
Hi J
Thanks for the screenshot.
It looks like you’re using a version of Vantage Premium prior to Page Settings being introduced. Vantage Premium hasn’t been updated since 2018 and isn’t PHP 8 compatible. I recommend migrating to the version of Vantage hosted on WordPress.org. If you haven’t modified your theme at a code level you can download the Vantage ZIP file to your desktop via https://wordpress.org/themes/vantage/. Once the ZIP file is on your desktop, it can be installed from AppearanceThemesAdd NewUpload Theme. Footer Attribution and Ajax Comments are the only two formerly premium settings not included.
Hi Andrew,
I checked out the new theme via WordPress.org themes while logged in to WordPress and when Vantage 1.20.26 is selected… it shows that the new theme is active? How is this possible? Please go to https://jhavel.com/gapsample and scroll down to view my screen grab and advise please.
Why does my homepage not have the gap issue? Is this truely the only way?? If not, advise on alternative setup in wordpress.
And please confirm, confirm the following:
• Replacing Vantage Premium to latest Vantage 1.20.26 theme will provide the ‘page settings’ functionality to omit the gap between the menu and Hero image/widget below on all my pages of my site?
• If/when uploaded, it will overwrite the current Vantage Premium theme?? And I won’t be able to go back to the Premium version in the case that the latest Vantage theme messes up my current site?? Please advise…
• I am pretty sure I haven’t changed anything at the code level… but how can I check / preview my current site with Vantage 1.20.26 without messing up my current site?
I hope you can understand this is rather frustrating to have PAID/purchased a ‘Premium’ theme, only to have the HASSLE of reverting back to the base Vantage theme.
Greatly appreciate your assistance, J
Hi J
I checked out the new theme via WordPress.org themes while logged in to WordPress and when Vantage 1.20.26 is selected… it shows that the new theme is active? How is this possible? Please go to https://jhavel.com/gapsample and scroll down to view my screen grab and advise please.
There is only one ‘vantage’ slug, one identifier for the premium and free theme. If you want to move to the maintained version you can switch to any other theme, delete Vantage and then go to AppearanceThemesAdd New, search for Vantage and install.
Why does my homepage not have the gap issue? Is this truely the only way?? If not, advise on alternative setup in wordpress.
You’re using the Page Builder Home Template on your home page. The Template drop down is in the right column. It won’t be suitable for all pages, I’m not sure it’ll be suitable for pages with a sidebar. It might be suitable for the page you’re working on at the moment.
If you want to remove the gap on the page in question you can use in Custom CSS:
.page-id-2266 #main { padding-top: 0; }To do the same on any page, replace 2266 with the page ID, you can get the page ID by editing the page and locating the ID in the address bar, it’ll be the only number there.
Replacing Vantage Premium to latest Vantage 1.20.26 theme will provide the ‘page settings’ functionality to omit the gap between the menu and Hero image/widget below on all my pages of my site?
Yes
If/when uploaded, it will overwrite the current Vantage Premium theme?? And I won’t be able to go back to the Premium version in the case that the latest Vantage theme messes up my current site?? Please advise…
You can request the last Vantage Premium version ZIP file released in late 2017 from us via email at [email protected] at any time. Kindly send your purchasing email address or Vantage Premium license key.
I am pretty sure I haven’t changed anything at the code level… but how can I check / preview my current site with Vantage 1.20.26 without messing up my current site?
You’d likely know if you made code changes. If you don’t have a local installation or a staging site, there isn’t an easy way to check. All switches from Vantage Premium to Vantage have gone smoothly in my experience.
Hopefully the above helps resolve the gap in one of the suggested routes.
Cheers
Andrew
Hi Andrew,
Thanks for your response. I tried the code provided it but didn’t remove the gap (go to https://jhavel.com/gapsample) for reference, additionally scroll to the first image/screen grab for reference (below the Hero/title image) and let me know if done correctly whereby the CSS code was added to the first/top ROW on the page (this ROW has the SiteOrigin Hero image widget ie. UX designer…).
Please advise, J
Hi J, you can insert Custom CSS rules at AppearanceCustom CSS or CustomizeAdditional CSS.
Hi Andrew,
I tried the previous code provided ie. page id (2266) in both global locations as advised
and the gap remains
. The CSS code at the global level would need to be generic ie. not specific to a page yes?
Such as:
.site-header {
margin-bottom: 0px;
}
I tried this more ‘generic’ CSS in both locations and did not work (gap remains). Can you advise on what the code would need to be?
Thanks, J
Hi J
Is the suggested Custom CSS rule saved and in place? If so, which location is it saved in?
Thanks
Andrew
Hi Andrew,
this code worked:
.page-id-2266 #main {
padding-top: 0;
}
Thank you for persevering, J
Super, glad to hear you’ve made progress.
All the best!