@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 … 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
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…
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?:
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.
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
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?