Page scrolling gets stuck at the bottom. I have a fixed Nav Bar and fixed footer

I am probably doing something really stupid, but page scrolling gets stuck at the bottom. Will not scroll all the way up. I have a fixed Nav Bar and fixed footer. I have the header and footer on z-axis: 1.

I tried adding padding to the bottom like I had to on the top, but that did work. I even tried adding some margin on bottom, but that didn’t work either.

It’s happening on the home page and the knife category page. It probably happens all other pages, but they do not have enough info for it to scroll. I purposely made the image div box oversized to show the page will not scroll.


Here is my site Read-Only: https://preview.webflow.com/preview/jlds-sauce-and-knives-testproject?preview=5a66acd0a0470c5b0e5815ff28982e53

Hi @warcraftman68,

Nothing wrong with the nav and footer being fixed.
There some settings I would personally do differently.

My solution :
To fix you issue padding bottom on you body will work but be sure to remove all styles set on the height of it as it is supposed to be auto (category page was height = 100px). Your footer is also a different size in height than your nav so be sure to reflect that in the padding of the body (80px vs 131px). I think that would get you closer to your desired design.

Other tips:

A bit of extra clean up will help improve the maintainability of your project. If a style does nothing just remove it (exemple margin at 0 on top and bottom on your body) as highlighted in blue means that a style is applied and therefore some code is written in the background of Webflow. The time you will spend being very tidy with your classes will save you a ton of time when you will have to come back for some minor changes.

I noticed you set up a class on your body . You could use the Body All Page selector instead (pink label) to setup you padding top and bottom as it seems that you will always display nav and footer. This way the class on your body can only contain the styles which don’t need to be reflected on other pages (background colour for example).

I hope it will help you.

Max

2 Likes

Thank You, gonna give it a try