Closed currentcreative closed 2 years ago
bacoords
commented
2 years ago Ha yeah, the sticky footer feels like it should be a browser default.
Did you use the .mt-auto class on the footer and the .h-100 class on the <html> and <body> elements?
currentcreative
commented
2 years ago Thank you, I tried all the classes in the Bootstrap 5 example, but it doesn't work for me. These are all the classes I added (I also tried only the classes you suggested and no more).
In header.php:
<html class="h-100" <?php language_attributes(); ?>>
...
<body <?php body_class(array( "d-flex", "flex-column", "h-100")); ?> <?php understrap_body_attributes(); ?>>
In page.php various places, I added this class:
flex-shrink-0
In footer.php:
<div class="wrapper mt-auto" id="wrapper-footer">
None of that worked.
I ended up doing something completely different, which did work. But, I'd like to do it the correct way with Bootstrap 5 classes if anyone can help me figure this out. It seems like the default layout completely works against a sticky footer layout. A sticky footer layout should be the default layout, imo. I've never met someone who thinks a footer floating in the middle of the page is preferable.
bacoords
commented
2 years ago Here's what I did in header.php:
<html class="h-100" <?php language_attributes(); ?>>
<body <?php body_class( 'h-100' ); ?> <?php understrap_body_attributes(); ?>>
<div class="site h-100 d-flex flex-column" id="page">
And then footer.php:
<div class="wrapper mt-auto" id="wrapper-footer">
The main issue is that the footer sits inside the #page wrapper so we have to adjust for that.
engAhmad
commented
2 years ago just add class "fixed-bottom" to the footer element
<footer class="footer fixed-bottom"></footer>
bacoords
commented
2 years ago To be clear, the fixed-bottom class will keep the footer on the bottom even after scrolling, which is slightly different than pushing the footer to the bottom on pages with little to no content.
currentcreative
commented
2 years ago bacoords, thanks for your hard work helping me out here. And you're right, fixed-bottom is a whole different thing. That's basically a bottom banner style footer which is good for a call to action promoting a sale or something, but very odd for a footer design otherwise.
It's a shame this is so difficult with just Bootstrap classes. I'll share with you my simpler approach that just took a couple lines of CSS:
#page { /* parent element of .sticky-footer */
min-height: 100vh;
}
.sticky-footer {
position: sticky;
top: 100%;
padding: 125px 175px; /* this is a really tall footer just to make the point that it does not affect sticky layout. You can remove this padding and the footer will still stick to the bottom no problem. */
}above approach pushing content with the footer to bottom leaving huge gap on top of the content !
header.php
<html class="h-100" <?php language_attributes();?>>
<body <?php body_class();?> <?php understrap_body_attributes();?>>
<div class="site h-100" id="page">functions.php
keep default classes
/**
* add required classes for sticky footer
*/
function sticky_footer_body_class($classes)
{
$array = array('d-flex', 'flex-column', 'h-100');
return array_merge($classes, $array);
}
add_filter('body_class', 'sticky_footer_body_class');footer.php
<div class="wrapper mt-auto" id="wrapper-footer">
currentcreative
commented
2 years ago If you're talking about my code, there's no gap, it's just that the client wants a HUGE footer area and that padding I put in there makes a huge space. The footer is actually dark grey, but I didn't include the background color in the above code, because it has nothing to do with the sticky-footerness of it. I just put a comment there instead pointing out the huge padding. You can just remove the gigantic padding to remove the space if you don't want a huge footer area.
If your new version takes the sticky footer out of a wrapper container, I'll go back and try it instead. And thank you for caring enough to reply again! Much appreciated.
Shouldn't I be able to just follow this example? https://getbootstrap.com/docs/5.0/examples/sticky-footer-navbar/
Serious question, too: why does anybody not use a sticky footer by default? Nobody really wants footer content in the middle of a page if there isn't enough content to push it down, do they?