Masthead module 'Jumping' just after page load

Question

I'm slowly working my way through a number of bug fixes across a number of sites and came to this one, which has had me baffled for quite some time.

The site uses a Masthead/Masshead (whichever it is) module and just after the page loads, this seems to jump up slightly behind the menu.

For example, if you have a look at any of the treatments pages There is a dark green Masthead - shortly after load this moves upwards and the white text becomes closer to the menu.

I really can't figure out what is causing this, I have requested support from the Template developer but unfortunately they were less than helpful.

My guess is that there are some conflicting css classes but I am by no means a css expert.

Thank you in advance. Regards D

Answer 1

I'm not a T3 expert but the page initially loads with the following HTML:

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

A few seconds after the page starts loading, an "affix" class is added:

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

Try changing the template navigation settings to fixed / not fixed to see if that helps.

If there are no likely looking menu settings, you could try adding some CSS to the custom CSS file to change the position of the "affix" class from "fixed" to "relative" like this or similar:

.t3-header.affix {position: relative !important;}

See https://joomla.stackexchange.com/a/3878/120 for instructions on creating or editing a custom CSS file for T3 templates.

Answer 2

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.)