[Resolved] Has Sticky Footer been figured out?

Home Forums Support Has Sticky Footer been figured out?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #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.48
    GP Premium 1.3.1
    #346749
    Leo
    Staff
    Customer Support

    Hi there,

    Are you referring to the just the copyright section or widgets as well?

    #346757
    Tom
    Lead Developer
    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%;
    }
    #346760
    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

    #346768
    Leo
    Staff
    Customer Support

    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/

    #346811
    Tom
    Lead Developer
    Lead Developer

    Or you can do the footer widgets and copyright section together:

    @media (min-width:769px) {
        .site-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    }
    #347253
    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 */
    	}
    
    }
    
    #347400
    Tom
    Lead Developer
    Lead Developer

    So this gave you your desired effect? Thanks for posting the code 🙂

    #347864
    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.

    #347947
    Tom
    Lead Developer
    Lead Developer
    #348010
    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.

    #348239
    Tom
    Lead Developer
    Lead Developer

    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.

    #348351
    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.

    #348610
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #349055
    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

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.