Sticky footer

[Pedroml]

Hi.
I’ve enabled sticky top menu and I’m planning to add infinite scroll to the website.

Is there any way to make the footer fixed?

[SQadmin]

But you will have a huge footer section allways on top of site content. Is that what you want?

Regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Pedroml]

I found this:

COPY CODE

footer {
left: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 120px;
}

content {
padding-bottom: 120px;
}

My question is how to implement this in kleo?

[SQadmin]

Hi Pedro,
Well… you forgot about socket section which come after footer, you need to hide it from admin – Theme option/general settings if you don’t want to use it. Anyway your code will not work for boxed version, so, I’ll provide another great method to have a fixed footer. You can place these lines in admin – Theme option/general settings/Quick css box or in ../assets/css/app.css in a child theme.

COPY CODE

#main {
padding-bottom: 182px; /* Padding based on footer + socket height */
}
#footer,
#socket {
width: 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: fixed;
}
#footer {
	bottom: 62px; /* Put 0px if you hide socket from admin */
	height: 120px; /* Your desire footer height */
}
#socket {
	bottom: 0;
}
.page-boxed #footer,
.page-boxed #socket {
	max-width: 1440px;
}

Regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Pedroml]

Thanks!

[Author]

Posts