White gaps when the "sticky" header is enabled

Hi I think it may have something to do with the large white area directly below the header that appears briefly when loading the page.
If you load/refresh the page whilst viewing further down the page, you can scroll back up and see that this large white area below the header actually stays there and doesn’t go away even when the page has finished loading… it looks unprofessional. (This is all without the sticky header enabled).

With the sticky header enabled (which I would like) the second parallax section has less white showing at the top
and the fourth section (big background picture like the first section) has a white bar above it.

I think the header or the first parallax section is to blame but I am a beginner and have no idea.
Please help if you can, I would dearly love to sort this.
Sean

This is my site without the sticky header enabled
https://shoulderbladesback.com/

Good morning

Sorry but i can’t view your website, i have this message:

This site can’t be reached shoulderbladesback.com refused to connect.

good morning!
Thanks so much for responding.
oh, on what browser?
I can view it fine here using the link I provided.
Maybe you could access the front page via the blog page using the menu?
https://shoulderbladesback.com/blog/
Sean

Hi Noda,
I contacted Bluehost and the said this:
"I did check the site from my end and it is loading fine from our end. I have also checked in different desktops and the site is loading fine.

It looks like here ISP is causing the issue"

I’m not suggesting you have an issue your end, but maybe it will load ok now? (it has happened to me once before where a link couldn’t connect).

thanks

GOod evening

@perrryman most probably it was a temporary issue because i see website right now, however, i tried several times on this morning
Ok, can you please enable sticky header now? i want to see the problem

Good evening
Yes I will do it right now

The first parallax section overlaps the second, and the forth has a white gap at the top

Good morning

Thank you

  1. I cant this effect perryman, can you attach screenshot?
  2. Use this CSS to fix the white gap problem, this will make your picture fixed
    #shapely_home_parallax-5 {
    background-image: url(https://shoulderbladesback.com/wp-content/uploads/2019/04/AdobeStock_104349248-copy.jpeg);
    background-size: cover;
    background-attachment: fixed;
    }

Morning Noda, the first image shows how the page loads without the sticky header enabled.

The second two show the overlapping when i enable the sticky header.

Will that CSS stop my image from moving?

Thanks
Sean

The Css fixes the whitespace in the lower widget but not the overlapping of the first widget over the second. the white space above the image is smaller at the top of the widget and larger underneath. (And some of it is in red here).

thanks Noda
sean

The top parallax widget overlapping
It might be worth mentioning that the overlapping only occurs at the moment when the header drops down as you start scrolling down the page. Before the header drops down the second widget looks good.

And strangely if I reload the page from further down and then scroll up, the overlapping doesn’t occur! If I reload from the top, the overlapping is there.

the white space below the header
The white space below the header upon loading (if loading the page from a position further down the page, or if loading it in an un-viewed tab) is still there.

Thanks

Good evening

Still, I cant get first problem overlapping parallax image, please check this video, is it there on the vide?
https://www.loom.com/share/3cd78bebf1914f6a86f8cd43bdb8b5b6

Hello,

Yes, it is there but if you had scrolled down a bit more it would have been more obvious.
The white space above the picture within the second widget is smaller than it is below the image within the second widget.
So, it is as if the first image (the blue and red anatomical picture) is overlapping the second image and cropping the white space down.
This is more evident in the last screenshot that I sent where you can see that the “edit widget” button (the circular blue pencil) is actually above the widget and not within the widget as it should be.

Thanks nodari ch,
sean

Good evening Sean

Ok, now i understand, please add this css and check again:

#shapely_home_parallax-4 strong section {
padding: 109px 0px;
}

Hi Noda,
Thanks for the reply.

Unfortunately, that didn’t work. Nor did it stop the white area under the header when the page loads (even without the sticky header).

Ok, I was trying something out and… this overlapping issue only happens in that second section when image alignment is set to “left”, when I set it to “right” the overlap disappears.

Does that mean I can’t use that widget when the image is set to left? (because that is what I would prefer, also when set to right the background colour changes and doesn’t look good with the top widget)?

Also if I try to “reorder” the widgets it looks an utter mess (please see screenshot)

Thanks
sean

Good morning

please add code and let me check it, it should work most probably you did not clear cache

OK, I cleared the cache and added the code. But it doesn’t seem to work.

Did you see my message about it only happening when the image alignment is set to left?

Thanks,
Sean

Good morning

The code was not working because looks like you change parallax sections, one of them is probably removed, this is your current code:

#shapely_home_parallax-3 strong section {
padding: 121px 0px;
}

“Did you see my message about it only happening when the image alignment is set to left?” - Yes sure :slight_smile:

Good morning Noda,

  • I’m afraid I don’t really know what that code means, but I am eager to learn? What do you suggest I do? (maybe I need to remove a faulty section, or replace one?)

  • Am I not able to remove and change parallax sections without issues then? I can’t remember if I have removed any original sections, I probably did though.

  • Do you know how I can resolve the issues with my home page? I would be extremely grateful to you for any
    pointers, I’m ready to put in the effort to rectify whatever it is that I’ve done in error!