- This topic has 21 replies, 2 voices, and was last updated 7 years, 9 months ago by
.
- Posts
Maybe this has been asked before.
I tried searching but I’m not sure if the prior solutions will apply to my case?I would like to make the Footer Sticky/Float so it is always across the bottom of the page irregardless of the length of the content in the Body Frame or the Right Sidebar, so it frames the bottom of the website window always.
Is this possible?
site:Kreamandkream.com/wordpress
Hi jkream
Thanks for posting your question.
At the moment there isn’t a built-in sticky footer. This has come up before so please, give me a day or so to look at what JavaScript would be required to handle this. I’ll hopefully come back to you with a small custom solution that does the trick.
If we implement with a child theme it means having to redo all Appearance > Customize > Theme Design settings. Have you made a lot of adjustments there?
these are just Fonts and Colors?
I did go through and Normalize them all to the same font and color. But if I have to I can redo that. Its not a very complicated site.Ok so the no child theme option is like this:
1. Install this plugin: https://wordpress.org/plugins/insert-headers-and-footers/.
2. Go to Settings > Insert Headers and Footers.
3. Insert this in the Header field:https://raw.githubusercontent.com/coreysyms/foundationStickyFooter/master/stickyFooter.js
But you must wrap it in a script tag:
<script>All the code goes in here.
Now close it.
</script>Here is the GitHub page for the code we’re using: https://github.com/coreysyms/foundationStickyFooter. Thanks Corey.
In the Header field for a sticky footer?
I did this and it does not seem to have made a change to the appeareance.
The Header field refers to the location the code will be inserted into the HTML structure of the page, not to be confused with the header on the front end of the site.
To confirm, you’ll need to click on the link I provided and then copy the code from that page. Everything else is correctly implemented except that. Sorry for not being clearer.
OK I did misunderstand previously
now:
I went to https://raw.githubusercontent.com/coreysyms/foundationStickyFooter/master/stickyFooter.js
I copied all from that page to the header section wrapped with <script> </script>Saved and re-loaded pages.
It does not seem to have any effect?
You need a page with very little content on it to test this out. Ideally, one with a Full Width page template in use so the sidebar isn’t pushing content down either. Do you have a link to a page like that?
The home page is short enough, but I said I want it to stick irregardless of the length of the sidebar. Sidebar is on every page
Are you using a big display? I’m on 27″ and the footer is always at the bottom of the screen because of the sidebar. So ideally, I’d need for you to create a test page with no sidebar and no content so I could take a look.
Here is how it looks on my side.
If you’re using something bigger than 27″ then I can see how that wouldn’t be the bottom of your display.
You must be logged in to reply to this topic.