- This topic has 20 replies, 4 voices, and was last updated 3 years, 1 month ago by
Leo.
-
AuthorPosts
-
July 9, 2017 at 8:50 pm #346740
Chris
I’ve been doing some research about sticky footers with Generatepress (or as much as forum search, documentation search, and Google can lend me at least) and I know that sticky footers have always been really tough, especially trying to use them with Generatepress, but i’m just wondering if anyone’s figured them out by chance?
GeneratePress 1.3.48GP Premium 1.3.1July 9, 2017 at 9:02 pm #346749Leo
StaffCustomer SupportHi there,
Are you referring to the just the copyright section or widgets as well?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2017 at 9:10 pm #346757Tom
Lead DeveloperLead DeveloperI wouldn’t say it’s tough, it’s just not overly user-friendly, especially on mobile devices.
This is how you’d do it to the copyright section:
.site-info { position: fixed; bottom: 0; width: 100%; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 9, 2017 at 9:32 pm #346760Chris
@Leo Oh yeah I should’ve clarified- both the copyright section and the widgets. Regarding mobile though, I think I’d disable it on mobile, since pages would most likely fill mobile- some of my pages are gonna be pretty short though, so on larger displays it’s gonna look pretty awkward.
@Tom Yeah I actually got something similar to that already with a bit of playing around- the issue was with the widgets.EDIT:
OH I played around with your code Tom and changed it to.site-info { position: fixed; bottom: 0; width: 100%; }
to make it both parts and it’s working perfectly, using media queries to only show it on desktop π
I think this will suffice- thanks to both of you very much. Again, I’m so glad I bought premium- the support here is amazingEDIT 2x:
Nooope, false alarm. That was not the solution haha
Man this is such a hassle, and it’s something so simple lolJuly 9, 2017 at 10:08 pm #346768Leo
StaffCustomer SupportHmm you can maybe try to do something like this:
@media (min-width:769px) { .footer-widgets { position: fixed; bottom: 40px; width: 100%; } }
And adjust the px number to the same as the copyright right section height.
Or this plugin might help: https://en-ca.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 10, 2017 at 12:25 am #346811Tom
Lead DeveloperLead DeveloperOr you can do the footer widgets and copyright section together:
@media (min-width:769px) { .site-footer { position: fixed; bottom: 0; width: 100%; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 10, 2017 at 2:01 pm #347253Chris
Well see, the thing is, I don’t want it fixed to the bottom of the browser.
Also, with that I was able to make a neat fixed sticky footer. I’ll just post the code here- maybe someone’s looking for that? Ignore the Z-index thing I’m working on some stuff lmao@media (min-width:769px) { .site-footer { position: fixed; z-index: 5555; bottom: 0; width: 100%; } body { margin-bottom: 263px; /* Height of Site-Footer */ } }
July 10, 2017 at 8:36 pm #347400Tom
Lead DeveloperLead DeveloperSo this gave you your desired effect? Thanks for posting the code π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 11, 2017 at 2:32 pm #347864Chris
Unfortunately not. On longer pages, it sticks to the bottom (which I guess by definition would be a sticky footer), but I want it to only stick to the bottom of the browser with there isn’t enough content, and behave like normally on pages that are long enough.
July 11, 2017 at 8:42 pm #347947Tom
Lead DeveloperLead DeveloperAh, have you taken a look at this topic?: https://generatepress.com/forums/topic/sticky-footer/#post-178536
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 12, 2017 at 12:17 am #348010Chris
Yeah, and I just took another look, but I haven’t been able to glance much from it that works on my site, in some ways probably due to my own inability/code ethic, though.
July 12, 2017 at 9:53 am #348239Tom
Lead DeveloperLead DeveloperThe problem is that it’s trying to overcome standard browser functionality. A site is only as tall as the content, so trying to “fight” that with code will never be perfect.
If you’d like to link me to the page in question, I might be able to help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 12, 2017 at 12:50 pm #348351Chris
My Homepage is pretty short. And I wouldn’t be this adamant about it, but on larger screens (1440p like I’m running, and 4k) it just looks so bad to me that I can’t even get over it.
In the menu I placed a page that simulates a “long website” too.
Also please excuse the terrible terrible use of Hooks and Custom CSS.July 13, 2017 at 12:06 am #348610Tom
Lead DeveloperLead DeveloperWhat if the color below your footer matched your copyright bar? Wouldn’t be perfect, but I have a pretty big screen and even your home page scrolls a little bit.
Cool site btw π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 13, 2017 at 12:48 pm #349055Chris
Yeah that’s probably gonna have to be my fallback, and also trying to simply make pages long enough haha
And thank you π
It’s all thanks to your guys’ plugin and theme- love it so much -
AuthorPosts
- You must be logged in to reply to this topic.