Sticky Footer - SOLVED - BLOCS3 - 12_2018

#1

Hello

I found the following TOPIC about the Sticky Footer, but in the last post it says that in Bootstrap 4 have a different code.

@Norm is there a chance to create a sticky check box to stick the footer as you create in header?

There is the solution after 51 replies thanks to all for the help:

So in the code of the page you have to add the following:

<style>
.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;
}

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

Then on the Bloc that is the Footer, just add the following classes:

navbar-fixed-bottom
fixed-bottom

I have done a last thing that was in the last bloc just before the footer, add the class:

lastbloc

And in the preferences for this class, I add in the bottom margin a padding with a value of 60px.

Hope this help summarize this topic.

#2

Hi Pedro @Pealco

SImply add the following code to the Page Settings under Header:

    <style>  .footer {
  position: fixed;  
bottom: 0; 
 width: 100%;  
z-index: 999;  }
        </style>

and then add the class footer to the actual footer bloc. May need more stlying depending on your footer, however may be not if you use one of the premade footer brics.

MDS

#3

Thanks a nice solution for sticky footer. It’s pretty cool. Thanks again for sharing.

Casey

#4

You’re very welcome.

MDS

#5

Fantastic, many thanks @MDS. Works like a charme.

#6

@MDS UPS, a little problem, now the page is like in the back of the footer, how can I make like the page ends where the bar starts? Is it understandable? The content of the footer is overlapping the body area.

#7

I think that’s what is suppose to do. That’s why they call it sticky. It can have a cool effect when used right. Some the of Wordpress themed sites use them for keeping a contact number always available on the screen.

The drawback is with a sticky navigation and sticky footer you limit the content you can view. They are always showing and yes the content scrolls under them.

Casey

#8

@casey1823 I think I didn’t explain me right, the main effect is ok, is only when it ends the page, the end of the content of the body ends on the real end of the page not in the begging of the footer, so that parte of the body content is hidden, do U understand?

#9

I do think I understand. The end of the body in the page ends when you scroll down to the bottom of the body. A sticky footer like header will stay on top of the main content.

Casey

#10

scroll%20down
scroll down.jpg916x1530 127 KB

I’m in the end of the page, and the content is hidden, there is a way to fix this?

#11

Have you tried adding some more padding to the bottom of the page?

Casey

#12

I did a test and yes if your content is to close to the bottom of the bloc it will cut off your content. I then add padding to the bottom of the bloc and it showed all of the content. Add the padding the the bottom of the bloc above the sticky footer.

Casey

#13

Many thanks, for me it solves the question,
Now… please can you explain me how to add padding only to the bottom of the bloc, I only found the padding that affects the top and bottom of the bloc, sorry…

#14

Sure, click on the bloc above the footer in the navigation bar (left sidebar)
On the right side pane type a name (anything you want) I used footer in the Classes area. Then clicking on that class will bring up the class manager. The first tab had the padding and margin. Click on the bottom (it shows in blue) and then add what ever padding needed just for the bottom.

Casey

50%20PM
Screen Shot 2018-12-10 at 8.40.50 PM.png664x1172 120 KB

#15

@casey1823 now yes, everything is ok, many thanks for your help…

scroll%20down%20fixed
scroll down fixed.jpg916x1530 124 KB

#16

Hey, Hey were good to go! That screenshot you showed did the trick. Sometimes it’s really hard to figure out exactly what people want.

Glad I could help.

Casey

#17

Yes, and my Technical English language doesn’t help…

Many thanks one more time.

#18

Thanks @casey1823

Indeed you’re right.

I see that there are many of us who love to help members of this forum.

Having a screenshot, a video or even better the .bloc file (which you can send by private message) is the best way to communicate and for the many helpers on this forum to assist more rapidly. That said do not forget to open support tickets for issues and relay bugs if any to the Blocs team.

I was myself assisted many times and this is why I am trying to give back whenenver possible.

For videos, I was advised to use this free app https://monosnap.com which works like a charm.

Also one more thing… Do not hesitate to edit your post title and add SOLVED so it indicates to others that they can benefit from the post thread.

Just my 2 cents for anyone reading this post.

Happy blocing…

MDS

#19

@MDS a little problem, after I insert the code in the footer and increase the padding, I try in preview and everything is alright, but when I upload to the server, in iPad and iPhone the footer just disappears.
Take a look:

image
D79560CA-4C40-4414-81C9-538D17CE42F3.jpeg1536x1907 549 KB

What Is the problem?

#20

Try to add

z-index: 99;

to the code of @MDS