Margin-top pushing elements below bottom browser frame in designer

Design help General
1

I’ve created a fixed navbar with a fixed height and then pushed the section below down by adding margin to the top - just like you show in this tutorial. - YouTube
I’ve never had an issue with this before but in the designer, it’s now pushing everything down so that my footer is getting cut off by being pushed below the bottom of the browser frame. This only happens in Chrome on a Mac (Version 61.0.3163.100) even with extensions off in incognito mode. It’s fine on Safari.

Here is my public share link: https://preview.webflow.com/preview/seans-dandy-project?preview=2d43c86cb8273cfdc6b6f2317a3e980c
(how to access public share link)

2

I too have this issue

3

Any update on this? It’s still happening. I can’t even get to my footer to change anything because it’s pushed down too far in the designer.

4

Hi @tubes @Mark_Mo_Lerner
​
​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 absolutely positioned navbar.

3 Likes
5

Got it. I should have realized this. Getting lazy remembering the CSS box model.

1 Like
6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.