- This topic has 21 replies, 2 voices, and was last updated 8 years, 3 months ago by Andrew Misplon.
- AuthorPosts
- July 25, 2016 at 5:24 pm #4279
jkreamParticipantMaybe 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
July 25, 2016 at 5:27 pm #4280
Andrew MisplonKeymasterHi 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.
July 25, 2016 at 5:31 pm #4281
jkreamParticipantok, that would be great, thanks
July 25, 2016 at 5:43 pm #4282
Andrew MisplonKeymasterIf 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?
July 25, 2016 at 5:46 pm #4283
jkreamParticipantthese 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.July 25, 2016 at 5:48 pm #4284
Andrew MisplonKeymasterOk 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.
July 25, 2016 at 5:49 pm #4285
Andrew MisplonKeymasterOr I can put this in a child theme.
July 25, 2016 at 5:56 pm #4286
jkreamParticipantIn the Header field for a sticky footer?
I did this and it does not seem to have made a change to the appeareance.
July 25, 2016 at 6:02 pm #4288
Andrew MisplonKeymasterThe 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.
July 25, 2016 at 6:18 pm #4289
jkreamParticipantOK 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?
July 25, 2016 at 6:21 pm #4290
Andrew MisplonKeymasterYou 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?
July 25, 2016 at 6:38 pm #4291
jkreamParticipantThe 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
July 25, 2016 at 6:40 pm #4293
Andrew MisplonKeymasterAre 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.
July 25, 2016 at 6:42 pm #4296
Andrew MisplonKeymasterHere 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.
July 25, 2016 at 7:02 pm #4298
jkreamParticipantyour image is showing exactly what I don’t want. Maybe I did a bad job explaining. but this is the behavior I already have. For example if you scroll up from the position shown in your screen cap, the footer will disappear.
I want the footer to stay so it should still be at the bottom here
- AuthorPosts
You must be logged in to reply to this topic.