Hi, I’m a user of Vantage Premium Theme.
I want my footer to be sticky.
But as for the below link, vantage theme itself does not provide stick footer.
I tried to get sticky footer by adding or editing some codes in my php and/or css
but I failed to.
I searched for web to get a solution and I found the below.
With methods in the above link, is it possible for me to get a sticky footer in Vantage Premium Theme?
I want to know possibility and (if possible) how to apply the above methods to my web site (made by Vantage Theme) to get a stick footer.
Hi Hslee,
You can do this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (min-width: 780px) { #main.site-main { padding-bottom: 112px; /* Adjust this to be the same size as your footer */ } .site-footer { position: fixed; left: 0; bottom: 0; right: 0; z-index: 101; } }How does that look? Be sure to adjust the padding-bottom to prevent your content from covering the footer at the end of the page.
You might also need to install the SiteOrigin CSS Editor.
By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.
Thank you, Alex S.
Your CSS works but not as what I want.
My intention of ‘Sticky footer’ is like the one below
Is it also possible with Vantage Premium Theme?
Right one.
Not right one, both.
When content is short, layout is like left figure.
When content is long enough to scroll , layout is like right figure.
Hi Hslee,
I’m not 100% sure I understand. Can you please elaborate?
I suspect you’re looking to always have the footer at the bottom of the page regardless of screen resolution (in other words, prevent the footer from being high up on the page on really short pages). If that’s the case, please replace the previously provided CSS with the following CSS:
html, body { height: 100%; } #page-wrapper { /* Footer is at the bottom of this widget. We have to ensure it's at least 100% height and the position is relative so we can make use of position absolute for the footer. An absolute inside of a relative will make it absolute to the parent, not the page. */ min-height: 100%; position: relative; } #main.site-main { padding-bottom: 100px; /* Ensure the footer doesn't overlap */ } .site-footer { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; }How does that look?
You might also need to install the SiteOrigin CSS Editor.
Thank you for you code, Alex S.
I put your code inside
@media (min-width: 780px) {
}
and edit the value of ‘padding-bottom’.
That worked perfect as what I want.
Thank you very much :)
I think the content in below link should be changed for one searching Vantage sticky footer in web.
Thread: Reduce the Vantage footer size
With inserting the above code of Alex S to CSS, Vantage theme can have a sticky footer(adaptive to the length of contents).