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.
Awaiting an answer
Helix Framework
Footer stick to bottom
17 replies
Seppe Asked this
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;
}
Paul Frankowski Senior Staff
3 years ago
· edited
Hi Seppe,
read the last tip on that documenation page > https://www.joomshaper.com/documentation/helix-framework/customization-tips
Pavel
3 years ago
· edited
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
Seppe Asked this
@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."
Seppe Asked this
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.
Paul Frankowski Senior Staff
This is topic is 2 years old... probably a new documenation tip is needed in next days.
Paul Frankowski Senior Staff
1 year ago
· edited
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.
Seppe Asked this
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%;
}
Hans-Peter
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.
Paul Frankowski Senior Staff
0.o
Hans-Peter
1 year ago
· edited
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"
Seppe Asked this
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.
Paul Frankowski Senior Staff
I don't think so. HTML code structure, ID names are the same.
Seppe Asked this
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
Seppe Asked this
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.
Hans-Peter
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
Seppe Asked this
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.....
Seppe Asked this
1 year ago
· edited
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
TPMH Tiszaújváros
Greetings!
I still have this problem.
Is there a solution yet?
BR
Csaba
Paul Frankowski Senior Staff
Only Custom CSS method, a few were shared here.
TPMH Tiszaújváros
Hi!
These didn't work for me.
What I did today: in the template index.php file (line 167) (<main id="sp-main") I replaced (<main id="sp-main" class="spmain">) and then added to the css:
.spmain {
min-height: 100vh;
display: flex;
flex-direction: column;
}
and also:
sp-footer {
margin-top: auto;
}
This is how it works.
But when you overwrite index.php, it disappears :) if there is a new update....
BR
Csaba
Seppe Asked this
Since the update of about 7 months ago, none of those custom CSS seems to work.
I didn't update the majority of all my created websites, because with the old versions, the CSS still works.
I still wait for a final answer, which will make it work.
There were already some updates, I don't understand why they build in the option automatically, to have a sticky footer. Then all the custom CSS is not needed.
Seppe Asked this
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.
TPMH Tiszaújváros
Hi Seppe!
Try it on your test page:
In the template index.php file, replace line 167 with this:
<main id="sp-main" class="spmain">Then the Helix Custom code/Custom Css:
.spmain
{ min-height: 100vh; display: flex; flex-direction: column; }
sp-footer {
margin-top: auto; }Br
Csaba
Seppe Asked this
Started this 3 years ago, at that time, the given solution worked.
Due to updates, it doesn't work again.
so is there already a fixed solution?
Pavel
Hi. Here is (for the latest Helix Ultimate)
#sp-main {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#sp-main-body {
margin-bottom: auto;
}
Seppe Asked this
see my first reply, now 3 years ago
it's not working.
Pavel
it's not working.
This can't be true
Seppe Asked this
As mentioned before, also by other people... due to an update of SPPB this code stopped working.
See the reply of:
Hans-Peter -- 11 months ago -- #199543
TPMH Tiszaújváros -- 4 months ago -- #218319
I tried all the different codes mentioned here, none of them works for me.
Log in to reply.