Header images not showing on mobile devices

Sydney
#1

Hi,

I am using Sydney 1.74 on WordPress 5.4 and all of a sudden the header images are not showing on my site when viewing on a mobile device. The homepage header images show but they don’t show on any of the internal pages. My theme is up-to-date. I am holding off on the WordPress update until they have resolved some of the issues with the upgrade. The url is https://harmonicmotion.org

I have even tried a couple of custom header plugins and still, no header images on internal pages on mobile devices. Hope someone has a fix for this. Looking forward to a response. Have a wonderful day and thank you in advance!

JP

#2

Hi JP,

I am sorry to hear that you have run into an issue. I am happy to help out.

I need more information in order to identify the root of the problem easier. Can you provide a screenshot to your website’s Header type setting, that is located under the Appearance menu > Customize > Header area?

Regards,
Kharis
aThemes Support

1 Like
#3

Hello,

I have the same problem on mobile devices. I have just started to create a website with the Sydney theme and I am using the plugin “Unique Headers” so I can have different header images in different pages - but no header images are shown on mobile devices.

I choosed the Sydney-theme because the Pro-version of this theme is compatibel with WooCommerce.

I hope you can help me!
Thank you in advance!!

bild
bild374×770 21 KB

#4

Hi,

I have a plugin solution for this. You can download it from this repository.

I hope that plugin works. And let me know your views.

Regards,
Kharis
aThemes Support

1 Like
#5

Hi again Kharis,

Thank you so much for your reply!!
The plugin works great!! :+1: Thank you!! :pray:
It’s only one thing - the “overlay-function” on the header images doesn’t work on mobile devices or tablet devices. Do you have an extra CSS code that can add the “overlay”-function on mobile devices and tablet devices?

Thank you very much for your help!! :pray:

bild

#6

Thank you for trying the plugin. And I am glad it works for you.

Try adding this simple CSS code to your website’s Additional CSS under the Appearance menu > Customize > Additional CSS.

    .header-image2 {
      position: relative;
    }

    .header-image2:after {
      content: '';
      display: block;
      background-color: #000;
      opacity: 0.7;
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%;
    }

Let me know whether it helps or not.

Regards,
Kharis
aThemes Support

#7

Hi again Kharis,

Thank you for your reply!!
It works absolutely perfect!! :+1: :+1: :+1:

Thank you very much for your help!! :pray:

Kind regards,

1 Like
#8

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support