Stop Sticky footer from going under page content

Beaver Builder
1

How can I Stop Sticky footer from going under page content. I have added this code and all works good as far as the footer staying on the bottom of short pages, BUT if in a small window the page content goes over the top of the footer–not good. need it to stop at the footer and then use the scroll bar, any ideas on how to fix this? See pictures.

Code I added:
.sticky-footer1 {
position: fixed;
bottom: 38px;
left: 0;
right: 0;
}

.sticky-footer2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;

Capture1
Capture11242×796 120 KB

2

You’ll want to make the z-index higher than the content on the page. So add

z-index: 1000; (or whatever it takes)

To your div.

3

Thanks for getting back to me. I just tried adding that in my css and nothing happed. Not sure what I am doing wrong.

John

4

I don’t know where you added it. Can you send a url of your page?

5

entire site is still in progress…

here is a page I entered it on for testing.

http://johnzapf.com/landscapes/

6

Well, it’s now on top, but it’s transparent so showing through to the rest. Put a background on the .sticky-footer1 so it’s solid. Even #fff worked for me.

7

Thanks, same thing, doesn’t trip the scroll bar on the side till half the bottom row is covered?

8

You need to add that z-index on the very bottom blue bar also.

I don’t know what you mean about the scroll bar not showing. It looks right to me.

9

ok just added to the blue bar. So what I am talking about is make you browser smaller. the scroll bar does not appear till half the bottom row is covered up. I am just thinking about people on old small screens/low res…

Capture1
Capture11602×843 196 KB

10

I ended up figuring something out that worked, added 12% to the bottom margin.

Thanks for all your help
John