- This topic has 15 replies, 4 voices, and was last updated 3 years ago by Leo.
August 18, 2017 at 7:45 pm #369041Caleb
I am not sure if you can help with this. I have seen several forum posts about sticky footer but nothing that I can see is resolved for what I am looking for. I also have absolutely no experience with coding so I am very lost. Is there a way I can add the code from here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
And get it to operate like that? I need so badly for the footer to stick to the bottom only when the content isn’t long enough, just like that site is showing. I want my site to work like this: http://www.lik.com/
when you toggle from normal to full screen the page always fits the browser which is what I’m looking for.
My home page is very similar. I would gladly provide you with login information to look at my site if that helps. Also, I understand if you cannot help. Either way, I appreciate very much what you have done with GP Pro and could not have gotten as far as I have now without it. I am forever in your debt! So thank you very much for all your hard work!GP Premium 1.4.3August 18, 2017 at 7:50 pm #369044LeoStaffCustomer Support
This topic might help: https://generatepress.com/forums/topic/has-sticky-footer-been-figured-out/August 19, 2017 at 7:43 am #369303Caleb
Thanks for getting back Leo!
Unfortunately, I have already read through that post. I might be able to do this on my own, but I am not knowledgeable on where I need to go in WordPress/theme to write the code I linked to.
Would you happen to know where I can go for that? Thank you in advance!August 19, 2017 at 9:27 am #369373LeoStaffCustomer SupportAugust 19, 2017 at 10:15 am #369391DavidStaffCustomer Support
Caleb – firstly install Simple CSS from the wordpress plugin directory and activate.
Then go to WordPress dashboard > Appearance > Simple CSS.
In the editor window Copy and Paste the code that Leo provided in the other link, And Save CSS.
When you then preview your pages you will see the footer is sticky.
You don’t need to use flexbox to do this. That code is more from a developers point of view when creating a site.August 19, 2017 at 1:37 pm #369487Caleb
Leo – More than likely my lack of understanding. Thank you for the help
Dave – Thank you for the explanation I will give that a try!August 19, 2017 at 2:29 pm #369515LeoStaffCustomer Support
You should only have to add the CSS here to make it work: https://generatepress.com/forums/topic/has-sticky-footer-been-figured-out/#post-346811August 19, 2017 at 2:33 pm #369520Caleb
@Leo Thank you! I will give it a go once I get off work. I appreciate all the help, its the main thing keeping me from going live.August 19, 2017 at 2:40 pm #369529LeoStaffCustomer SupportAugust 20, 2017 at 7:28 am #369818Caleb
Hey! I got a chance to give it a go. It’s a win lose really and I think I will have to just work around it until we can pay a programmer. The footer sticks to the bottom. which is great for the pages that don’t have enough content. But I don’t want it there when I do have enough content. Like I said, I will have to find a way to work around it for now because I don’t see anyone posting anything that is what I’m looking for (The flexbox example site I linked was exactly the kind of behavior I’m looking to get someday.)
Thank you again from everyone who gave me suggestions! I really appreciate it, seeing as I am so new to website building and have no coding knowledge! You guys rock! Will definitely be donating when I get some spare change 🙂August 20, 2017 at 8:47 am #369856LeoStaffCustomer SupportSeptember 12, 2017 at 8:05 pm #384315Denise
In case this might be helpful for someone….
I am having a similar issue with pages that have short content. For example, if someone searches on a word and there are no results returned, the height of the entire page is very short and the footer goes up too high. The result I’m going for is not really a “sticky” footer that always displays in a fixed position. Instead, it’s more a matter of adding extra padding to the main content so that it bumps the footer back down to a lower position on the page.
To solve it, I added this CSS:
I don’t know if it’s the best solution or not, but it seems to at least help. I’ve only tested it on Chrome on Windows 10 laptop. I’d be interested to know how it displays on other devices.
DeniseSeptember 12, 2017 at 9:48 pm #384360LeoStaffCustomer SupportSeptember 13, 2017 at 9:09 am #384713LeoStaffCustomer SupportSeptember 20, 2017 at 4:38 pm #389078Denise
Correct. The footer is not sticky. You have to scroll down to see the footer. This solution is not a good one. It’s a compromise and a trade-off. It stops the footer from being too high when there is only a small amount of content on the page.
I don’t have any further questions. Thanks for your help.
- You must be logged in to reply to this topic.