Footer Stick To Bottom - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

Footer Stick To Bottom

S

Seppe

Helix Framework 2 years ago

Good morning

In PageBuilder there is the option to make the footer sticky to the bottom. Is it in the Helix framework also possible?

If I edit the template, there is no such option with the footer.

0
18 Answers
Pavel
Pavel
Accepted Answer
2 years ago #105813

Hopefully this is a correct way

Hi Seppe . Yes it is

read the last tip on that documenation page

Hi Paul. I think this is not that needed in the aspect of this topic. And maybe this solution also should be added to documenation page. It makes footer always on bottom if page has no content

0
S
Seppe
Accepted Answer
2 years ago #105782

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;
}
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #105796

Hi Seppe,

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

0
S
Seppe
Accepted Answer
2 years ago #105854

@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."

0
S
Seppe
Accepted Answer
3 months ago #197592

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197613

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197629

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.

0
S
Seppe
Accepted Answer
3 months ago #198015

Good afternoon

It seems like there is a little delay in the code, before it's visible. I tried browsers with a clean cache, but the CSS had no effect. First it didn't work, but now after 2 days, the code seems to work

I managed to use this code:

#sp-footer { 
  position: fixed; 
  bottom: 0;
  left: 0;
  width: 100%;
}
0
H
Hans-Peter
Accepted Answer
3 months ago #197937

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197951

0.o

0
H
Hans-Peter
Accepted Answer
3 months ago #197963

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"

0
S
Seppe
Accepted Answer
3 months ago #198080

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #198101

I don't think so. HTML code structure, ID names are the same.

0
S
Seppe
Accepted Answer
3 months ago #198108

Good morning Paul Please see in the hidden content the links Until yesterday, everything was OK, today I did the update of the Helix Ultimate

0
S
Seppe
Accepted Answer
2 months ago #199540

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.

0
H
Hans-Peter
Accepted Answer
2 months ago #199543

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

0
S
Seppe
Accepted Answer
2 months ago #200934

Did you already manage to find a solution? For now, it's still not working here, so I can't update all websites using Helix.....

0
S
Seppe
Accepted Answer
2 months ago #199546

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

1