Header turns transparent and overlaps the footer

[Nalwi]

Hi,
while browsing my homepage on the mobile, and scrolling down to the footer, the header turns transparent and gets mixed with the text and images in the footer. How do I fix this?

[tristup]

Hi Nalwi,

I have visited the website on my Android mobile device and found it working perfectly, can you please check by clearing the browser cache of the mobile device. If that does not resolve the issue please let me know the name of the device and operating system you are using while having this issue to replicate it.

Thanks

[Nalwi]

Hi @tristup
I have followed your steps and cleared the cache on the mobile, but the issue is still occurring. I have attached a video link for you to be able to see the issue where the header is being overlapped by the footer.
I am using a Samsung s9+ and it’s on an Andriod version 10

[tristup]

Hi @Nalwi,

Thanks for your detailed video, it makes the issue clear to us. The z-index attribute value of the footer bars are the reason behind the issue. The z-index value of the Header and Footer bar are default 9999* and that is why the footer is coming over the header. I would suggest you decrease the z-index value of footer bars.
Please make sure that you have set the value lesser than 9999 and for all three bars in the footer. Please find the screenshot describing the settings.

Hope it helps.
Thanks

[Nalwi]

Yup, that’s perfect! thank you so much!
Could you please delete the images and video that I have attached? Thanks

[tristup]

Hi @Nalwi,

Great that it resolved now.

Thanks