Looking for slideout/sticky reveal effect for your Bricks site’s footer like this?
Simply add this CSS:
main {
/* make sure to cover the screen */
min-height: 100vh;
/* need a solid bg to hide the footer */
background: white;
/* put on top */
position: relative;
z-index: 1;
}
#brx-footer {
/* place on the bottom */
position: sticky;
bottom: 0;
left: 0;
}
4 comments
Lucas Pelton
With Bricks 1.9.9 the frontend.light.min.css has the following rule, which overrides the postition:sticky in your post
#brx-footer { background-position: 50%; background-size: cover; flex-shrink: 0; margin-top: auto; position: relative; width: 100%; }
You can fix the override by making your css more specific, like this:
footer#brx-footer { /* place on the bottom */ position: sticky; ...
Sridhar Katakam
Thanks Lucas.
Yorgos Kastritseas
on mobile the footer goes up and covers my header
Sridhar Katakam
Tried giving a higher z-index to the header?