- This topic has 9 replies, 6 voices, and was last updated 1 year, 11 months ago by Fernando.
-
AuthorPosts
-
September 20, 2020 at 5:57 pm #1451518Sam
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!
September 20, 2020 at 6:29 pm #1451531ElvinStaffCustomer SupportHi 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.
September 20, 2020 at 6:56 pm #1451547SamHmm 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.
September 21, 2020 at 1:17 am #1451770DavidStaffCustomer SupportHi there,
try the solution i provided here:
https://generatepress.com/forums/topic/cant-get-menu-nav-or-footer-to-be-sticky/#post-1232453
It works for most scenarios.
September 21, 2020 at 6:32 pm #1453146SamThanks David, I think that will work out for me. Would be cool to see this option built in 👍
September 22, 2020 at 12:32 am #1453370DavidStaffCustomer SupportYou’re welcome
January 18, 2022 at 4:59 am #2084371ElvisThis 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 */
April 14, 2022 at 3:31 pm #2189173YingStaffCustomer SupportTry add this CSS as well:
nav#secondary-navigation { width: 100%; }
April 14, 2022 at 6:29 pm #2189246Fernando Customer SupportHi 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 be701px
.Hope this helps! Kindly let us know how it goes. 🙂
April 17, 2022 at 4:57 pm #2191728Fernando Customer SupportYou’re welcome Anthany! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. Kind regards. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.