Hello,
I’m using wordpress but I know some of CSS and HTML aswell.
So I decided to edit some stuff that I can handle using the CSS.
So, the footer came with the wordpress didn’t stick to the button, I tried to stick it and it did work, but somehow when there’s lots of content when u have to scroll down, the footer stays at the middle of the content, but in a weird way.
My code is simple as that -
That would place the footer at the botom of its nearest positioned parent/ancestor, if not other set it will be the html/viewport and then it will be stuck there.
Normally that would usually be a 100% high main div that has taken its 100% min-height from body and html, so all of those needs the hight:100% setting. Then how to make the footer sticky depends on if the footer is a child of the body or a child of the main container. Here is an old method:
html,
body{
margin:0;
padding:0;
height:100%;
}
main{
position:relative; /* this makes the main the nearest positioned ancestor to the AP footer. */
padding-bottom:100px; /* protects the content from the overlapping footer. */
min-height:100%; /* it will overflow the body when more content fills up. So the scrollbar is the normal on the root element. */
}
footer{
position:absolute; /* This is a footer that is contained by a positioned main container */
bottom:0;
width:100%;
height:100px;
}
footer{ /* This is a footer that is a sibling coming after a non positiond main container */
margin-top:-100px; /* pulls up the footer to ovewrlap the 100px main padding. */
height:100px;
}
There are more robust demos at @PaulOB’s site: http://www.pmob.co.uk/
You will find lots of demos to learn from, after all he is the guy who invented the sticky footer and never stopped developing. Look for his latest sticky footer technique using css table display.
My post was an attempt to explain how a sticky footer works with a link to working demos, not to suggest a solution.
You gave very little info in your first post, nothing at all to draw any conclusion from. The screenshots said nothing useful.
Please post the whole code you have so we can see what’s wrong. If possible you can also upload the whole page to your host in a temporary directory and link to it.
As it is a WP site you perhaps could obfuscate the address like: www_wpdomain_com so we can type the address and take a look.
I guess you are working with a “child theme” to make the changes, otherwise the changes will be gone after the next theme update.
Good! The absolute positioned footer will refer its bottom position to the nearest ancestor that has position set. Like I told in the explanation I posted.
Your footer takes its postion refering to the viewport because that is the ultimate ancestor, the html element has as default a position (the stacking starts there).
I think you could have figured out the solution if you gave it a thorough thought.
The page has a #wrapper div that is the parent to the footer and it need to get position applied to it so the footer refer to that div and not the html.
Using position:fixed will keep the footer at the bottom of the viewport at all times. However it means that the last element on the page will be obscured by the fixed footer and you won’t be able to see the last 120px or so that is hidden behind the footer.
The usual solutio is to add some padding bottom to the container that matches the footer height.
(I don’t know why you are using !important on the padding but I left it in place anyway.)
Of course if the footer wraps at smaller screens then the height of the footer changes so you will need to use media queries to take care of that. Generally fixed footers are best for small footers with little content.
A ‘sticky footer’ is one that generally sits at the bottom of the viewport when there is little content but sits at the bottom of the document if content is greater than the viewport (although the term ‘sticky’ is now currently associated with elements that move and then stick so is a little confusing working out the jargon :))
If that doesn’t work as I said, then I have no solution to your problem. Though, in that case I will test to edit your page in my browser to be sure it works.
EDIT) @PaulOB, you actually understood the question I think, it make sense, but I didn’t notice the post until now. Wish the thread end wasn’t covered by the post editor, I’ll never learn to scroll and check before posting.
Sorry for double posting but I thought that if I disable the footer at certain pages that would be awesome.
Is there any way to do that? Like to disable footer showing up at “store” or “faq” pages etc?
I mean, I mostly need at at the home page only… I could live without it for now at the other pages.
You didn’t answer my question and you are saying different things each time so its hard to guess what you want?
I’m assuming now that you want a sticky footer as I gave you the code for a fixed footer already. A sticky footer is one that stays at the bottom of the viewport on small pages but at the bottom of the document on tall pages (unlike a fixed footer which stays at the bottom of the viewport at all times).
Add this code after all your original code and test and see if it is what you meant. I can’t guarantee that this code will work on all pages if you have a different structure and you will need to test to make sure there are no adverse side effects.
Well I’m sorry but yes my main goal is to make the footer sticky at the button of every page no matter what.
But still it didn’t fix it but it made it even lower than it was. You can see at the website - maszone.com
Somewhy a scroll-bar came up and made the page even longer on a short and not needed for scroll pages with your code, dunno why.
All the code I have given you so far has been tested and working so please don’t reply “It doesn’t work” because it does work. If it doesn’t work as you expected then please explain what you wanted to happen and why this does not meet your requirements. You now have the code for all variations so the answer is in this thread.
Remember in order for us to help you you have to be clear and unambiguous in the discussions.
I’m sorry, I dunno why but I seem to use button instead of bottom every damn time.
Yes, I meant bottom and no, I don’t want a fixed one.
By saying sticky I meant to stick at the bottom of the screen even of there’s a scroll needed on big pages such as my homepage.
As you could see at my home page, it’s perfect, at the others you could see it’s not at the very bottom of the page, it just goes under the content.
Oh really, nope, I’m using Chrome atm and I see the same as you do only at the home page.
Pages such as store and cart, the footer isn’t at the bottom of the page, it’s at the bottom of the content which isn’t too much at those pages.
If it doesn’t work as you expected then please explain what you wanted to happen and why this does not meet your requirements. You now have the code for all variations so the answer is in this thread.