I'm having problems with making a footer that works

Hi, I have read several threads but none seem to answer my question.

I want to make a footer that stays at the bottom of the page. I tried using the “Absolute” position (bottom) and this works fine, but if my content exceeds the page height, the content goes under the footer and is no longer visible. If I use the “Automatic” position, the footer just sticks to whatever it has above. This is great when I have content longer than the visible page height, but when my content occupies less, the footer sticks to the content and I am left with a blank space below the footer.

I’m using Webflow since it’s supposed to be a user-friendly web page builder. I have no HTML or CSS knowledge so I’m having a really tough time understanding what I need to do. Could someone please point me in the right direction?

Thanks!

If you want the footer to stick to the bottom of the page and be on top of everything you have to choose position: fixed and choose the bottom option. Then you must make your z index to a value above the rest of your content, such as 100. It will then be on top of everything else.

You can follow the instructions here except just choose the bottom position instead Adding a fixed navigation bar - Webflow Tips - Forum | Webflow

Thanks, I’ll give it a try and let you know!

The thing is, I don’t want my footer to be on top of everything, I just want it to stick to the bottom of the page and prevent the content in my “content-heavy” pages to get lost behind the footer.

Thanks again

Based on what you have said you want I think you have to create two footers one that uses auto positioning and the other that uses fixed (as DFink has described). Use the auto position footer on pages that have content that exceed the page hight and the fixed position footer on pages where the content doesn’t take up the screen height. I would suggest making both of these footers symbols so you can reuse them more easily.

Yeah, I tried that, the problem is that if I use the fixed footer on a page where I have a slider with 4 images, the footer works just fine on a large display but the slider hides behind the footer on smaller displays. If I use the “automatic” position on a small display, the slider is large enough that the footer stays at the bottom of the page but floats to the bottom of the slider on larger displays.

My problem, really is that I haven’t found a way to make the footer work in EVERY browser configuration (not even talking about getting it to work on a tablet or phone configuration). If it works in a small browser window, it doesn’t for a large one and vice versa.

I find it harder to design a webpage in Webflow simply because the “user friendly” features it offers are great for simple things but once you need something very specific, it is a extremely complex process.

Once again, I’m stuck and appreciate all the help I’m getting from you guys, but one way or another, I can’t seem to solve my problem.

Thanks again for your help!

It’s kind of easy, if your footer has a height of 300px, put everything else in a section div and add a bottom margin of the same value… how’s that doesn’t work? Do you have a public link ?

Yes I was going to mention that even with my solution you were going to run into problems with screen hight. You can’t predict what height or width somes browser window will be in. That is the nature of the Internet. You can try adding a hight media query to your custom code. Change the footers positioning to auto at the height were the design breaks with the height media query.

That sounds great, but I have no clue what you just said. I literally have no HTML or CSS knowledge. I don’t know how to add a height media query; I don’t even know what that means. (I apologize).

Hi @thorugarcia, thanks for your post. To help us better understand the issue, and to help resolve this, could you share the read-only link to your site? Then we can take a look at the site, how it is designed and see how it behaves.

More information about read-only links:

Learn web design with free video courses and tutorials | Webflow University

Cheers, Dave

Wohoo! I fixed it!

All my problems were solved by doing the following: (I think someone told me this earlier. If someone did, sorry. I didn’t understand at the time).

  1. I positioned my footer to the “fixed” (Bottom) position.
  2. I Added a “selector” called bottom to anything at the bottom of my content (example: “Text Block”) and simply added a bottom margin equivalent to my footer size!

Thanks to everyone for your help. I really appreciate it!

(Btw, I apologize if my english is horrible, english is not my first language).

1 Like