Sticky Footer - Question | JoomShaper
Back to the questions

Sticky Footer

FP

Felix Pena-Sommer

Helix Framework 3 years ago

Dear all,

is there a way to define a sticky footer in the ultimate framework? It should be alway on the bottom of the page as long as the content is not larger than the page. The reason therefore is, that I've got some problems with my menus in the boxed layout (see https://www.moerike-gymnasium.de/index.php/moerike-leben) and so I want to disable the boxed layout. But know the compontent area should occupy allways the whole viewport. Otherwise the footer is visible on the middle of the page, which is not really nice.

Best regards Felix

0
7 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #6716

Hi there!

You can use the following code in your custom.css file:

#sp-footer { 
    position: fixed;
    width: 100%; 
    bottom: 0px; left:0px;
}

Hope this will serve your perpose!

Best Regards

1
FP
Felix Pena-Sommer
Accepted Answer
3 years ago #6864

Hi,

thanks for your answer, which solved partially my problem. Partially because the sp-component was after the modification in the front of the footer. So I added to the footer the css: z-index: 1; That solved the problem, but now a small part of the sp-component is always behind the footer. How can I manage it, so that the sp-component always finishes where the footer begins? It starts also right below the header. Is this possible?

Best regards Felix

1
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #6891

Hello!

There is a different solution to try.

Please use the below code instead:

#sp-maincomponent {
    min-height: calc(100vh - 189px);
}

Let me know the result!

Best Regards

0
xXx_DoMoDo_xXx
xXx_DoMoDo_xXx
Accepted Answer
3 months ago #144342

Hello,

I have a similar problem to the thread author.

Only in my case, the contents of the page behind the footer show at the bottom. Which CSS could I use to solve the problem? See Link https://test3.cabtronix.ch/index.php/de/produkte Scroll down.

U can check it and see the problem wenn u change by #sp-footer to z-index: 0. Content on foreground.

Regard Domo

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #145044

Hi xXx_DoMoDo_xXx,

Thanks for your query.

Would you please ask a new question with screenshot pointing to the area to understand it better?

Best Regards

0
xXx_DoMoDo_xXx
xXx_DoMoDo_xXx
Accepted Answer
2 months ago #148223

Sorry for delay,

Is there a possibility that the footer, if the body text is too small, remains at the bottom of the browser and with larger text, only at the end of the body text is displayed?

Site: test3.cabtronix.ch

thanks regard Domo

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #148622

Hi,

What you are trying to achinve is not feasible or might need code customization. However, did you try this?

#sp-footer { 
    position: fixed;
    width: 100%; 
    bottom: 0px; 
    left:0px;
    z-index: 1;
}
#sp-maincomponent {
    min-height: calc(100vh - 182px);
}
0