Page has stopped scrolling to content below browser bottom in Designer

[grantsenior]

Hello, hope somebody can tell me what I’m doing wrong here.

On this page http://united-cleaning-services.webflow.io/ the scrolling works fine as a published page. But in the Designer mode the scrolling function no longer works and in Preview mode scrolling to content below the bottom of the browser can only be done using the ‘Page Down’ key or down arrow key.

I have experienced this before and fixed it by turning off float:left attributes that were on ‘section’ elements. There are no float:left attributes on sections in this page. The body doesn’t have overflow:hidden on it either.

The body has height:auto and min-height:200px, the Navbar is fixed to top, a background Slider (full page width and height) is fixed to the browser top, all of the page content is wrapped in a div with height:auto and min-height:500px. I’d have thought this should all work properly.

If somebody can take a look and tell me where I am going wrong I’d really appreciate it.

https://preview.webflow.com/preview/united-cleaning-services?preview=4e3f25146a6a9e83b6e1b6497262fcc3

Further to this, I have created a simpler test to see what is going on, the issue is definitely being caused by putting a fixed position on the navbar element. You can see my test here Webflow - Just for Testing stuff

When the navbar is not fixed to the top the scrolling is perfectly fine. When the navbar is fixed to the top of the page the bottom blue footer section is no longer accessible when in Designer mode.

How do I stop this from happening? It’s driving me a bit mad.

Cheers
Grant

[Brando (Brandon Roche)]

Hi @grantsenior ,

Thank you so much for posting about this and great questions.

I took a look at the preview links you shared and think I understand the issue. This is expected behavior due to how margin works.

​This issue is often referred to as collapsing Margins. Basically, separating content from the body via Margin will push content off the page. This is true in the Webflow Designer and when coding by hand.
​
​To avoid this issue, you can create space by applying padding-top to the body element when using an absolute or fixed positioned navbar. Alternatively, you can drop a div block right after the navbar and set it’s height to create the space:

[grantsenior]

Hi Brando,

Thanks for that. I’ve tried both methods now, body with top-padding and an empty div with height to clear the nav. Both have worked and sorted the problem.

Thanks for your help!
Grant