First section on each page doesn't show completely

[nboote]

Hi,

As you can see from the screenshot I’ve uploaded - the first section on each of my pages doesn’t show completely (it gets cut off at the top). I think this is also causing the top image on each page to load weirdly the first time you go to any page.

For example: http://natashaboote.com/coaching/

The image loads in one position and then shifts down each time.

Is there a way to fix the first section getting cut off and also this weird loading problem with the image in that first section?

Thanks!

[thai]

Hi There,

Please find this custom CSS:

.masthead {
    position: absolute;
    width: 100%;
}

And change to this:

.home .masthead {
    position: absolute;
    width: 100%;
}

Let us know how it goes!

[nboote]

Thank you! that worked perfectly for making sure the first section doesn’t cut off.

The background image of the section still loads in one position and then shifts down - is there a way to fix this?

Thank you!

[ruenel]

Hello There,

It is because the height of your masthead. The actual height is 125 pixles. At the moment, you have set the Navbar top height to only 90. Please go to X > Launch > Options > Headers > Navbar and set the “Navbar Top Height” to 92 pixels.

You must also update your code which set the minimum height of the top bar and use this:

.x-topbar {
    min-height: 34px;
}

Hope this helps.

[nboote]

Hi,

I did both of those things but it still shifts the image after loading.

Is there something else I can try? Thanks!

[ruenel]

Hello There,

Thanks for updating in! Please try to disable parallax and see how it goes. In most case, the parallax background image will re align itself as soon as the entire page is loaded.

Please let us know how it goes.

[nboote]

Hi,

Yes you’re right - it doesnt happen with parallax off the problem is that I do want parallax to be on.

[rad]

Hi there,

Parallax is done through javascript and positioning is done after the image is loaded. Hence shifting appears when the javascript determines the new background position after the image is loaded.

But you can force its positioning by adding this CSS

.parallax {
background-position: top center !important;
}

But the movement effect will suffer since it’s no longer controlled by javascript.

Thanks!

[nboote]

Hi!

I just discovered that the custom CSS I added to fix the first section of the page getting cut off works for all the pages except for the homepage (see screenshot).

Which results in half of the text that I have on that image being cut off in mobile.

How can I fix it please?

[nboote]

It results in an issue like this on the mobile homepage:

[friech]

Hi There,

That is because of this custom CSS block.

.home .masthead {
    position: absolute;
    width: 100%;
}

Please remove that from your custom CSS.

Hope it helps,
Cheers!