How to stop footer from Scrolling on page?

My footer and logo on the home page keeps scrolling. How to fix both elements to not scroll and fit in place?


Here is my site Read-Only: [LINK][1]

On your “.Hero”, change 100vh height setting to 100%.
On “.Hero-container”, remove the top margin of 43vh
On .image-16 (your logo image) remove the top relative position shift of -264px

Next:
In the navigator: Move your two Navbar components out of the hero section


On “.Nav Container - Home 1” remove the max width of 1280px

On your “.Hero” section change the display to flexbox and use center/center alignment

1 Like

Thank you so much Port_of_Folio!! This worked! However, when I follow this step - On “.Nav Container - Home 1” remove the max width of 1280px, my nav bar went super slim, basically disappeared. So I had to add this width back. Any tips for this or should I keep it at the 1280?

Also, do you have any recommendations for how I can have the character’s feet not cut off? It looks fine in editor mode but as soon as I publish to the staging website, on desktop the feet are cut.

I also have this other thread with an issue I’m having that maybe you could help with too? How to reduce the size of the page? and How to fix navigation bar from moving between pages?

• I’m not sure what your intention is for the navbar. Should it span the width of the browser or do you want it to stop short of the edges? If so, keep as is.

• I do not see the issue you’ve described with the navbar shrinking. When I take out the max width property the nav stays the same height for me.

• I don’t understanding your logic for setting a min/max height on the nav logo.
You could try assigning a true pixel height to the logo in the navbar. Or set a pixel height to the navbar itself. This could help but again I don’t see it.

• To keep the characters’ feet from cropping, you’ll need to set a point of origin in the background image settings. And apply a slight offset, or modify your original image to include more area to the bottom.

• Your nav changes because you’re using a component on the homepage but not on the other pages. You also have two nav components on the homepage which isn’t needed.

• I do not understand your request “How to reduce the size of the page”

Hi Port_of_Folio,

Thanks again! I’ve being making progress since you started helping me. :grinning:

  • Character’s feet > Thank you! This helped a ton. It looks so much better on desktop view now, but unfortunately mobile view is set to the same settings but it didn’t change the crop of the feet. I’m unable to have our artist add extra room at the foot, so is there a way to fix mobile view too?

  • Navigation Bar > I added the component to all pages and removed the dup nav, but I still see the navigation bar move slightly between pages. It looks like this time it’s my scroll bar on some pages. I see my scroll bar disappear when loading the page then comes back when it loads fully. How to get the scroll bar to stay fixed in place?

  • Reduced Page Size > On the Careers Page after the jobs there’s a large black space of emptiness until it gets to the footer. I want to reduce the height of the page so I can remove that empty space. Although, I need to bring the space back once we add more roles later down the road.

Apologies, there are just too many unusual settings on elements, and also unusual structure to your page. I don’t know where to begin. This requires that you have a better understanding of the very basic layout functions in Webflow.

#1. There’s no need to have settings applied to your body element. If you need to make some over-arching edits to the body element, instead, try dropping a top-level div into your page and edit that instead.
#2. You’re probably doing something wrong if you find the solution requires adding a lot of padding or margin to make something work. This is a bad practice.

I recommend these lessons: