Sticky Footer - SOLVED - BLOCS3 - 12_2018

@MDS now it works… but there will be always a but … the scroll to top will be hidden by the footer… but, a but again … :slight_smile: just open the Class Manager, Look for .scrollToTop and in the Margin&Padding choose the bottom line and add 70px of Padding.
And work very well… Many thanks to all that make this work.
Maybe @Norm add a Sticky button to the footer…

Hi Pedro @Pealco

Yep I missed the Scroll to Top. Simply set the z-index to 99 for the fixed bottom In the page settings and it should do the trick.

.fixed-bottom {
    overflow: visible;
    display: block;
    float: left;
    margin-bottom: 0px;
    padding-bottom: 0px;
    z-index: 99;
}

MDS

2 Likes

Exactly, works great.
There is a sneak peek of my work that have this case applied:
BLOCS

With the SMS applied as well just go to TC24 and fill your number and keep the password or change it and send the SMS and it will open your message with the syntax applied.

Is design to mobile devices…

1 Like

Nice. However the scroll to top is not correctly aligned. Have you modified the padding you had set ? If you set bottom to 10 px instead of 20 it will be vertically centered.

MDS

you referring to this right?:

scroltotop

Do you mean this configuration? If so I revert it to 0 and nothing happened change it to 10px as you said and nothing changes as well.

Am I doing in the right place?

Hi @Pealco

Your Scroll to Top has the following coding from your link:

.scrollToTop {
width: 40px;
height: 40px;
position: fixed;
bottom: 20px;
right: 20px;
opacity: 0;
z-index: 500;
transition: all .3s ease-in-out;
}

You need to set the bottom to 10px instead.

So it centers the box in the footer.

MDS

But @MDS there is the configuration of scrollToTop:

And there is no value on bottom, so what happened?

Scroll to Top has some default values in Blocs and those are the ones I published and that should be modified.

However, you had mentioned earlier that you had added 70 px of padding. I am not sure why and where…

If setting the bottom to 10px in class manager does not work I suggest setting the whole code provided in Pages settings.

MDS

i have done that because the scrolltotop button was hidden by the footer, but then you told me to to add the line: z-index:99;
And it solve the problem and I delete the 70px of padding for the bottom line.
So I have to add all the new code of .scrollToTop in page settings in the html code under the other two items:
.navbar-fixed-bottom {
display: block;
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
width: 100%;
float: left;

}

.fixed-bottom {
overflow: visible;
display: block;
float: left;
margin-bottom: 0px;
padding-bottom: 0px;
z-index: 99;
}
[/code]

Try to add this to the page settings:

.scrollToTop {
    background-color: #F69447;
    float: none;
    bottom: 10px;
}

MDS

Works very, very well now. Many thanks for everything.
One question, how can I put all the quotes in the top of the topic, with all solutions? So others don’t need to read all the posts?

Hi Pedro @pealco

You can edit your first post then simply quote or just copy paste the code or elements you wish to share in the your top post.

MDS

Done, Thank you all for your help.

1 Like

Thanks, that works for me too. However, it would be nice, if @norm could add the missing stuff like z-index and position: fixed to the class editor :slight_smile:

I got this working… sort of. The “sticky” footer is not so sticky, it sticks to the top instead of bottom of page as soon as I scroll the page? I don’t really understand why this is so complicated, why can’t it just be a setting for a footer bloc? Or is it that this style of design is “out” and I need to get with the times? Am I correct that with a long enough page, this wouldn’t be an issue?