Header image not appearing, button colors not updating, photos appear slowly

https://www.synergystresearch.net/home-2/

Hi, I’m sure people have had similar issues as mine in the past and I’ve read their posts and solutions, and I’ve tried them, but still cannot figure out the solution to my problem.

I will try to provide as much preliminary detail as possible to assist with you assisting me.

  • This page was essentially made from scratch because I created a duplicate of the existing home page, and there was no picture header/subheader in the original (you can view the original by deleting -2 or just going to synergystresearch.net). By header/subheader, I mean the actual image, not the navigation menu at the top.
  • I have cleared browser and WP/Beaver cache.
  • I have tried viewing the page on Safari on my iPhone, Safari on my MacBook, and Chrome on my Macbook
  • I have tried removing and re-adding the image
  • I have re-uploaded the image and re-added as well

Issues:

  • No matter what I do, the header image does not appear, and two of the three buttons stays its default color instead of orange. But when you go on mobile the two buttons change to their proper color.
  • For other pages, when the image does show up, it’s last to appear, and I tried different file sizes at different resolutions but the issue still remains. Not sure how to optimize this.
  • the margin size adjustments at the bottom are saved when you access the settings, but after publishing they don’t reflect in real time.

for me all the buttons are orange and I would start by reducing the size of the background image almost 2MB takes time to load though it’s weirdly slow… any additional lazy loading plugins (didn’t take any deeper look)

header image is now 200KB so loading it up shouldn’t be a problem. Other page header images load up fine, it’s just this one for some reason.

Works just fine for me now - image is visible almost instantly (small delay) and looks good in google lighthouse too…

Awesome, thanks! Appreciate it.

Do you know how to enable it so that the banner/header that I have is separated from the rest of the page? So that the body/images don’t blend into the header image?