Body content jumps when sticky header reaches top of screen

Support
#1

For some reason, whenever my navbar hits the top of the browser window, all of the body content snaps upward by about 50–100px. It doesn’t happen on the home page, but it does happen on every other page, and I can’t figure out what is causing it to do that.

#2

Hi there,

I have just checked your site but I can’t seem to see the issue that you have mentioned.

were you able to get it sorted?

#3

The problem is still there. It looks like you are scrolling too fast to see it. Here is a video of me scrolling slowly. And this happens in both Firefox and Chrome:

#4

Hi there,

Thanks for writing in.

Please add this CSS to your global CSS.

@media (min-width: 980px) {
.masthead.masthead-stacked {
min-height: 166px;
}
}

It happens because once the navbar goes to fixed positioning, the entire masthead changes its height minus the height of the fixed navbar. With above CSS, the height will not change.

Thanks!