- This topic has 20 replies, 4 voices, and was last updated 8 years, 1 month ago by
.
-
Posts
-
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?
Customer Support
Hi there,
Are you referring to the just the copyright section or widgets as well?
Lead Developer
I 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%; }@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 lolHmm 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/
Or you can do the footer widgets and copyright section together:
@media (min-width:769px) { .site-footer { position: fixed; bottom: 0; width: 100%; } }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 */ } }So this gave you your desired effect? Thanks for posting the code 🙂
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.
Ah, have you taken a look at this topic?: https://generatepress.com/forums/topic/sticky-footer/#post-178536
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.
The 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.
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.What 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 🙂
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
- You must be logged in to reply to this topic.
