Slidebars
Slidebars copied to clipboard
Published
20 hours ago •
adchsm
adchsm
Slidebars with Sticky Footer
Hi,
I have implemented Slidebars and it works great! Problem is that my sticky footer is no longer sticky... I used this method for sticky footer:
<body>
<div class="wrapper">
...site content
<div class="push"></div>
</div> <!-- /wrapper -->
...footer
</body>
Once I implemented Slidebars I tried this:
<body>
<div id="sb-site">
<div class="wrapper">
...site content
<div class="push"></div>
</div> <!-- /wrapper -->
...footer
</div> <!-- /sb-site -->
...Slidebars
</body>
But it didn't work, i.e. the footer is no longer sticky...
I also tried this:
<body>
<div class="wrapper">
<div id="sb-site">
...site content
</div> <!-- /sb-site -->
...Slidebars
<div class="push"></div>
</div> <!-- /wrapper -->
...footer
</body>
But no luck...
This is the sticky footer CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
.footer, .push {
height: 150px;
}
Please advise.
Thank you, Isaac
I have a similar problem with my sticky header
https://github.com/adchsm/Slidebars/issues/196
I have the same problem with a fixed element in my page. Any solutions? :(
If i'm not mistaken you have to put your footer div outside of the #sb-site container and assign a "sb-push" class to it so when you open the slidebars, the fixed element gets pushed also.