Skip to main content
3 of 3
added 2 characters in body
RichardB
  • 3.1k
  • 11
  • 14

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 turn off javascript and load the page, it should illustrate how the section works without affix being applied.

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. This means that there is a space the same size as your fixed header when the header is floating, thus pushing the green area into the correct position.

For the header to begin in a fixed position, you need to add that affix class to your template's code, ie change

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

to

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

so that it has the afflix class in place before Bootstrap applies it dynamically.

Alternatively, you could add the css which affix uses with the following code:

header#t3-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}

(NB These last two changes will mean the area begins in the fixed position, and thus stop the jump, but will not prevent the green section appearing behind it - you need the padding for that.)

RichardB
  • 3.1k
  • 11
  • 14