[Resolved] Stick footer to bottom of short pages

Home Forums Support [Resolved] Stick footer to bottom of short pages

Home Forums Support Stick footer to bottom of short pages

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1451518
    Sam

    Hello,

    Is there a built in option to “stick” the footer to the bottom of the pages? I’m not asking to use “position: fixed;” which would always keep the footer visible, rather more as described here:

    https://css-tricks.com/couple-takes-sticky-footer/

    On pages with not a lot of content (eg a contact page), having the footer appear above the actual bottom of the browser window looks bad.

    Thanks!

    #1451531
    Elvin
    Staff
    Customer Support

    Hi Sam,

    You can try the “flexbox” approach provided on the link you’ve given.

    You can try this code:

    html, body {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    
    #page {
      flex: 1 0 auto;
    }
    
    .site-footer{
    flex-shrink: 0;
    }

    #page is GP theme’s id selector for content. .site-footer is the class selector for its footer. This should work assuming no stray blocks are added between the content and the footer.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1451547
    Sam

    Hmm not quite, that is doing something to the width of pages without sidebar widgets. It’s also creating an unnecessary vertical scrollbar.

    I’ve included the site URL in the private info section.

    #1451770
    David
    Staff
    Customer Support
    #1453146
    Sam

    Thanks David, I think that will work out for me. Would be cool to see this option built in 👍

    #1453370
    David
    Staff
    Customer Support
    #2084371
    Elvis

    This an old thread but let me post a complete thing:

    /* fit footer to bottom always */
    
    /* base functionality */	
    body { display: flex; flex-direction: column; align-items: stretch; height: 100vh; }
    .site { flex-grow: 1;}
    
    /* fixes */
    body.admin-bar { height: calc(100vh - 35px); } /* for logged in users to not have vertical scrolls */
    html { height: fit-content; } /* not supported in some browsers but cannot hurt to fit the root too */
    .container.grid-container { width: 100%; } /* fix to allow for container width set in customizer to keep working */

    To understand recursion, you first have to understand recursion.

    #2189130
    Anthany

    Hi Generatepress Support,

    I have tried the code above from Elvis, and it keeps the footer at the bottom of the page successfully, however, now instead of my logo being aligned left and secondary nav aligned right as shown: https://snipboard.io/EUqJYy.jpg , they are now both center aligned / clumped in the middle as shown: https://snipboard.io/lZ73rj.jpg . Any idea why this is happening?

    Site URL: scuphed.com

    Kind regards, Anthany

    #2189173
    Ying
    Staff
    Customer Support

    Try add this CSS as well:

    nav#secondary-navigation {
        width: 100%;
    }
    #2189219
    Anthany

    Hi Ying,

    Thank you very much for your response. That worked perfectly to make the secondary nav normal again, and fixed my logo on devices smaller than 768px (because the logo for mobile devices is part of the secondary nav), however my logo on devices larger than 768px is still center aligned: https://snipboard.io/BCx09M.jpg . Any ideas?

    Kind regards, Anthany

    #2189246
    Fernando
    Customer Support

    Hi Anthany,

    Here is something you can try adding in Appearance > Customize > Additional CSS:

    @media (min-width: 769px) {
        ul#menu-secondary-nav {
            display: flex;
        }
    
        nav#secondary-navigation {
            margin-left: unset;
            margin-right: unset;
            align-self: center;
            width: 100%;
        }
    
        header#masthead {
            margin-left: unset;
            margin-right: unset;
            align-self: center;
            width: 100%;
        }
    
        ul#menu-secondary-nav li a {
            white-space: nowrap;
        }
        ul#menu-secondary-nav {
            justify-content:flex-end;
        }
    }

    Kindly modify 769 in the min-width media rule to the appropriate display width. I believe yours would be 701px.

    Hope this helps! Kindly let us know how it goes. 🙂

    #2190127
    Anthany

    Hi Fernando,

    You are amazing, that worked perfectly! Thank you so much for your wonderful help!

    Kind regards, Anthany

    #2191728
    Fernando
    Customer Support

    You’re welcome Anthany! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. Kind regards. 🙂

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