Your site header has two sections

    <header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

which contains the navigation and

    <div class="wrap masthead ">

which contains your page title with the green background.

The reason it jumps is down to how Bootstrap's Affix class works - Bootstrap waits until you have scrolled past the area it wants to fix into position before adding that `affix` class to your header. As your header is at the top of the page, this happens as soon as the page has fully loaded (users never have to scroll past it).  However, before the page has loaded, the affix class is not part of your header tag and so the page will initially render without it.

That affix class adds the following css:

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

Position:fixed means that it appears in a layer on top of all other content, which is why when it has these styles applied, the content below is pushed up and behind it.

If you want to show all of the green area, then the simplest solution is to add padding to the top of the page:

    body {
      padding-top:52px;
    }

should do it.