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?