Creating a floating top or bottom bar in Kickpages is really easy, basically any section can be set to stick to bottom or to top on scroll. Create the section you would like to stick on float then click on edit, then select stick to top or bottom:
You can select "Stick to top" or "Stick to bottom" and add the custom CSS "bottom_float", it will work for both cases.
These floating bars are really effective, but sometimes they are way to big to display on mobile or tablet and take up way to much space, so we gonna add some code to the page settings:
The code to add is:
<style>
@media only screen and (max-width: 1200px) {
.bottom_float{
display: none !important;
}
}
.float_close{
color: #fff !important;
position: absolute !important;
right: 10px !important;
top: 10px !important;
cursor: pointer !important;
font-weight: bold !important;
}
</style>
<script>
$( document ).ready(function() {
$( ".bottom_float" ).append( "<span class='float_close' onclick='javascript: close_float();'>X</span>" );
});
function close_float(){
$('.bottom_float').fadeOut('slow');
}
</script>
The code above will do the following:
- hide the floating bar on screens below 1200px wide which covers mobile phones and tablets
- display a a close button in the top right corner of the bar
Please feel free to edit the code above to fit your needs and if you know what you are doing, if you are hawing any issues making it work, then please let us know and we can help you out.