Gap at Browser Refresh, DIsappears on Scroll

Support
#1

What’s causing this on a large desktop display? I haven’t played with css today, but I’m seeing a gap above Section 1 when I refresh the browser:

but it goes away when I scroll down even one pixel and then back to the top of the page:

I’ve adjusted Section padding and gap element, but nothing fixes it. I can prevent Section 1 from displaying on a large desktop display, and then the same thing happens with Section 2. The gap goes away as soon as I resize the browser down to a small desktop size or below. The DS in the video means that the visible Section is only marked to display on a small desktop display.

Here’s a video of it in action:
http://screencast-o-matic.com/watch/cbQthEIUrk

#2

Hi there,

Thanks for writing in.

You added a gap element on that area, hence, the gap will appear. And the reason it’s shifting is that your header height is not properly set. Please go to X > Launch > Options > Header > Navbar height and set it to 100 instead of 40. Then you can remove the gap element, I think you added that gap for the reason that your header is clipping under the header.

Thanks!

#3

That got me in the right direction. I wanted the navbar to be a little shorter than 100px, but I had set Section 1 Margin = 0 and tried to use the Gap. Bad on me. I put in enough Section 1 Margin to get the behavior right. Now I have a 50px header and a 63px Top Margin on Section 1.

Thanks a lot, Rad. You fixed my Self-sabotage!

#4

You’re welcome.