CSS code injection conflict

Site URL: https://www.sharemyhome.co.uk

Hi, 

A couple of years back I put together a site which, for context, uses a bit of custom CSS for typefaces and some other minor styling points, along with code injection in the header and footer for Google Tag Manager. There have been some minor changes in terms of image removal and a bit of repositioning by the owner but nothing on a code/CSS level, since then.

A few days ago the owner of the site contacted me to say the on the home page the type styles have been over-ridden to render in black (instead of a grey colour used on the other pages/the site styles and themes) the burger menu icon disappears from the mobile view, the social media icons are rendering in white/transparent in the footer, and all the container/background colours for sections have disappeared.

SS themselves have said to the owner that when the site is previewed with scripts disabled it reverts back to normal, which is true. I've removed the scripts and saved the site without them as another test but that doesn't make the site render in it's normal colours etc. Besides, the tag manager script is required, which is an issue in and of itself, if removed.

Does anyone have any ideas on what conflict could be causing the overrides and disappearing icons etc when the scripts are active? I've attached a couple of images to help demonstrate the issue.

Add to Design > Custom CSS

/* Fix errors */
footer.sections .section-background {
    background-color: #f9f7f7 !important;
}
[data-section-id="5ef2552214ce7c31c39f4c3b"] .section-background {
    background-color: #386a93 !important;
}
[data-section-id="5ef2552214ce7c31c39f4c3b"] * {
    color: white;
}

Hi @tuanphan 

Thanks for that CSS, it's worked perfectly for that section, though the issues with the icons in the footer rendering in white, the mobile navigation icon also rendering in white are still present, some of the background colours are still missing too.

Would it be a case of finding the tags for each of these and using the same CSS above with the tag replaced to suit?

I've attached more screenshots to demonstrate. Anything showing with the correct colours, is due to having scripts disabled. Appreciate your help.

On 9/12/2022 at 3:48 PM, BenJG said:

Hi @tuanphan 

Thanks for that CSS, it's worked perfectly for that section, though the issues with the icons in the footer rendering in white, the mobile navigation icon also rendering in white are still present, some of the background colours are still missing too.

Would it be a case of finding the tags for each of these and using the same CSS above with the tag replaced to suit?

I've attached more screenshots to demonstrate. Anything showing with the correct colours, is due to having scripts disabled. Appreciate your help.

The problem comes from SS, it can happen in many sites, you should contact to see if they can fix it soon. If they still don't have a solution soon, I will give the code for the whole thing. But I guess will require a lot of code

I have the exact same problem, i only added some custom code to change the colour of the logo in some pages. it worked fine until last week and still does on all pages apart from the home page. Like BenJG, footer rendering in white, header text black instead of white, mobile navigation gone. When i remove the code from the page everything is ok apart from the logo that i need it to be negative. Is there any simple way around this? I m not good with code

website is: unklesa.org

first photo shows problem, second is the code i have added, 3rd is when scripts are removed

16 hours ago, unklesa said:

first photo shows problem, second is the code i have added, 3rd is when scripts are removed

First, Line 7 need a closing </style> tag

Next, Line 1 is invalid code

Next, to make nav to white, use this code

<style>
  div.header-nav-item a {
    color: white !important;
}
</style>

I can't thank you enough, this worked perfectly!