Desktop Header not Same for Mobile

https://verobeach.marketing/news/

The header on desktop starts black background with white logo and on scroll changes to white back ground with dark logo.

For some reason on mobile device this does not work. If I change browser size it works all sizes, on my iphone it does not.

Stars black, stay black on scroll and logos are inverted dark first and light after scroll.

Hello @verobeachmarketing,

Thanks for asking. :slight_smile:

I checked the website and on mobile header and scroll function is working fine. I tested using Chrome’s dev tools responsive simulator function. Please see recorded screencast. I see that you are using W3 Total cache, please try clearing cache and see how it goes.

Thanks.

I did both safari and chrome, with and without incognito etc.

Hi There,

I can’t replicate the issue with Firefox and Chrome on my end as well.

Perhaps this has something to do with the issue on actual iPhone/Mobile.



Those images are requested from non-secure protocol (http://) while you site is under https://. Please re-set (remove and re set) those images.

Make sure to clear your W3 Total cache plugin.

Thanks,

All very good advice. Thank you.

Ok, I did that. Still same issues. I also checked another iphone, same issue. This is quite perplexing.

It doesn’t change to white on scroll for me. The images I guess are working.

Hi There,

Thanks for asking again!

I can replicate the issue on my end in a iPhone6.
Would you mind providing the login details so that we can have a look?
Please send in a secure note.

Thanks

I posted details…

Hey @verobeachmarketing,

The rbga value you used for your background is only rgb.

Try setting the alpha value like this:

Thanks.

It’s not supposed to be transparent. Its supposed to be white not black. Are you saying like it will work if I use alpha but do like .99 or something?

Yes. If you want it to be solid, you should have not used rgba. You should have used hex instead and the hex code for white is #fff. If you want to use rgba, use 1 for the alpha. Or, use rgb if you’re not going to use the alpha. Please try it. I personally don’t have an iPhone nor an iOS device. But, I have fixed this same issue before.

This did fix it. Thanks you so very much. Makes no sense to me but I will take it.

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.