found it... I guess

I added this extra CSS code, same as I used for PageBuilder... Hopefully this is a correct way, if not... please advice :)

 .body-innerwrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#sp-main-body {
    margin-bottom: auto;
}

Hi Seppe,

read the last tip on that documenation page > https://www.joomshaper.com/documentation/helix-framework/customization-tips

@Paul

Thank you for the link Fact is, I tried to search the documentation. It would be usefull if words like 'sticky' result in pages in the documentation. Now it just says "Sorry, but nothing matched your search terms. Please try again with some different keywords."

Good morning Is it possible that due to updates the above mentioned code is not working anymore? For nox, I have put in Helix in the custom CSS, and I tried to put it in SPPB pages, also for the custom CSS. neither one of those ways works.

This is topic is 2 years old... probably a new documenation tip is needed in next days.

Try those variants

Example 1:

#sp-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: #555; /* Example background */
  z-index: 100;
}

Example 2: If Footer must be always visible, no matter how much the page is scrolled.

#sp-footer {
  position: fixed;
  bottom: 0; left:0;
  width: 100%;
  background-color: #555; /* Example background */
  z-index: 911;
}

yes, I added to Helix documenation.

Thank you for this information. Unfortunately, this is not possible in my case.

Until Helix version 1.2.2 is running, the old CSS customizations work. (See above) No longer after the update to 1.2.3.

Can you help me there? What information do you need? Thank you.

Hello, what does your answer mean?

i have joomla version 5.3.2 Shaper_helixultimate version 2.1.2

when I update to 2.1.3, the old CSS code no longer works.

In the layout under MainBody I have two areas that serve as footer:

"Bottom" and "Footer"

I need "Example 1"

Good morning. Just updated another website which uses the code for the footer from some years ago. It worked, until I did the last update for Helix Ultimate today. There is something in the source code that doesn't accept the old CSS to have to footer sticky on the bottom. So be aware you always need to update this custom CSS also.

2 weeks later, still fighting with the "sticky footer". I updated some more websites, and if the content of the page is not long enough... the footer is shown somewhere in the middle.

Even when I try now example 1

sp-footer {

position: sticky; bottom: 0; width: 100%; background-color: #555; / Example background / z-index: 100; }

The footer is still 1 or 2 inch from the bottom, although the CSS-code says "sticky".

Only when I change "sticky" into "fixed", the footer is at the bottom, but when there is more content the footer is over the content. which is useless.

I have exactly the same problem as Seppe. Also on several websites It occurs after updating from Shaper_helixultimate version 2.1.2 to 2.1.3

I also have some websites that should be updated. But as long as the 'sticky footer' doesn't work as it should be, I can't update. I tried several codes already, also what is added in the documentation, but nothing works so far.

Only the "fixed" settings work, but that looks so ugly on a website.

the only option that is left for me at the moment, is add some images or something to a webpage, to make in "longer" so that the footer is always in place. but that is NO solution.

It all worked just fine... until the update was there from Shaper_helixultimate version 2.1.2 to 2.1.3

Greetings!

I still have this problem. Is there a solution yet?

BR

Csaba

I updated 1 website to the latest version 6.3.0

I tried the code again:

#sp-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: #555; /* Example background */
  z-index: 100;
}

I tried it in the Helix Custom CSS I tried it in the Custom CSS of a SPPB page I made

In both cases, the footer shows up where the page ends. So sometimes even in the middle of the screen. The code works, because I see the color of the footer background change, as stated in the code.