Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky Footer
Tagged: footer, Sample Theme, Sticky Footer
- This topic has 10 replies, 4 voices, and was last updated 9 years, 1 month ago by
Erik D. Slater.
-
AuthorPosts
-
June 15, 2015 at 5:42 pm #156325
genesisnewbie
MemberI'm using the Genesis Sample theme and all good except no matter what I cannot get the footer to stick to the bottom of the page on larger screens. I have added the code below to functions and css, which makes the footer sticker but leaves an unsightly gap between the footer and the footer widgets. Has anyone else found a way to make this work?
/* FOOTER STYLES ----------------------------------------- */ html, body { height: 100%; } .site-container { height: 100%; } .page-wrap { overflow: auto; /* equal to footer height */ margin-bottom: -90px; } .site-inner { min-height: 100%; /* equal to footer height */ margin-bottom: -90px; } .site-footer, .site-inner:after { /* .site-footer and .site-inner:after must be same height as .site-inner */ height: 90px; position: relative; margin-top: -90px; }
//* Sticky Footer Functions add_action( 'genesis_before_header', 'stickyfoot_wrap_begin'); function stickyfoot_wrap_begin() { echo '<div class="page-wrap">'; } add_action( 'genesis_before_footer', 'stickyfoot_wrap_end'); function stickyfoot_wrap_end() { echo '</div><!-- page-wrap -->'; }
June 16, 2015 at 10:08 pm #156485Christoph
MemberHi,
can you share the URL to your website?
What do you consider larger screens?
June 16, 2015 at 10:11 pm #156486genesisnewbie
MemberHI Christoph, the site wasn't live but is now. sarahjee.com
I'm on a 27' iMac. I know most people don't view in full screen but it's bugging me...
June 16, 2015 at 10:27 pm #156487Christoph
MemberHi,
I´m sorry. I am on a 13 inch laptop and everything looks fine.
I´m probably not the best person to troubleshoot this 😉I would recommend that you close this topic as resolved and open a new one with the URL and 27inch info.
(Unanswered topics tend to get more attention from different developers than topics that are already being discussed.)
January 18, 2016 at 3:31 am #176838paaljoachim
MemberHi
Adjust your CSS code and see if it helps. Keep the sticky code in the functions file in place.
(I got it working on my screen and I also tested it full screen on my 24" monitor connected to my Macbook Pro.)html {
height: 95.5%;
}body {
height: 100%;
}.site-container {
height: 97.3%;
}.page-wrap {
min-height: 89%;
margin-bottom: 3px;
}.site-footer {
position: absolute;
width: 100%;
height: 100px;
}Inspired by: http://9seeds.com/tech/sticky-footer-genesis as well as http://jsfiddle.net/juroto/HL6Ad/
I design, instruct, help people to understand WordPress through my tutorials as well as create web sites and hold classes where i teach WordPress and Adobe software. easywebdesigntutorials.com
January 19, 2016 at 5:46 pm #176972genesisnewbie
MemberThanks for the above but still no luck. Nothing seems to work (even though I know this should)- very frustrating!
January 19, 2016 at 6:17 pm #176974Erik D. Slater
Memberpaaljoachim was on the right lines, and was almost there with just the very last bit (the rest of what he provided is not necessary).
Replace all of that with the following:
.site-footer { bottom: 0; height: 100px; position: fixed; width: 100%; }
Erik D. Slater: Digital Platform Consultant • LinkedInJanuary 19, 2016 at 6:31 pm #176976genesisnewbie
MemberHi Erik and thank you, but this isn't the desired outcome either. I think paaljoachim is on the right track as I would need to force the height of the body?
The footer only needs to 'stick' (to the bottom of the page) when their isn't enough content to make that happen. The footer includes the footer widget area (so both grey panels). It shouldn't move over the body content ever. The problem usually arises on large screens, but you can see it on the 404 page (www.sarahjee.com/404) on smaller screens. The footer (and footer widget area) rises up when there is only a small amount of content in the body.
Your code plus this should work but doesn't:
html {
height: 95.5%;
}body {
height: 100%;
}January 19, 2016 at 6:47 pm #176979Erik D. Slater
MemberAh-haaa. I see now what you're asking for 🙂
Take a look at this: http://codepen.io/cbracco/pen/zekgx (not mine, but I think it's what you're looking for).
Erik D. Slater: Digital Platform Consultant • LinkedInJanuary 19, 2016 at 7:24 pm #176981genesisnewbie
MemberHi Erik, that's the one! Thank you for your help!
Took some jiggery pokey as there are essentially 2 footers, the actual and the widget area, adding some margin-bottom to the footer-widets to make room for the footer sorted this. Here's the final code:html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 9rem; min-height: 100%; } .site-inner { margin: 0 auto; width: 94%; margin-bottom: 3em; } .footer-widgets { position: absolute; right: 0; bottom: 0; left: 0; margin-bottom: 44px; } .site-footer { position: absolute; right: 0; bottom: 0; left: 0; }
January 19, 2016 at 7:48 pm #176983Erik D. Slater
Member -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.