[Resolved] Has Sticky Footer been figured out?

[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.48

GP Premium 1.3.1

[Leo]

Hi 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/

[Tom]

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%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

@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 amazing

EDIT 2x:
Nooope, false alarm. That was not the solution haha
Man this is such a hassle, and it’s something so simple lol

[Leo]

Hmm 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/

[Tom]

Or 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-development

[Chris]

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 */
	}

}

[Tom]

So 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-development

[Chris]

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.

[Tom]

Ah, 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-development

[Chris]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

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.

http://hybridkid.net/

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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

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

[Author]

Posts