Love the new header options, have used a template but the black color in the background that I set in the CSS tab is the last thing to load – since the logo is white letters you can’t see it while the page loads.
Any way to fix this? you can see here. http://www.brandinginasia.com
Thanks guys!
Hi,
There is a transition of about 1 second before the background color will apply. That would be why it will take ma moment before the background applies. You could try a code to cancel the transition if you want to. This would be it
.td-header-desktop-wrap .td-element-style {
transition: none!important;
-webkit-transition: none!important;
}
Thanks
Hi! I have the same problem, and I’ve tried to insert the code you mentioned but it doesn’t seem to solve the problem.
you can see if you visit: https://nordsip.com
On the post pages, this animation is most inconvenient as the white background behind the header fades in after the header, which looks awful.
Perhaps I didn’t insert the code in the right place? I tried in the Theme Panel in “Custom Code” and then “Custom CSS” – I also tried in “Custom html” but neither worked.
Thanks for your help!
Hi,
@Aline For me the issue does not happen – https://www.screencast.com/t/MC3iOQJ5 I see you are using a predefined header template, the problem from above was happening when using a cloud header template. Nonetheless a solution will be found by us in that case.
Please let me know if you have more questions.
Thanks
Hi Simion,
Thanks for your response, what I’m describing is a slightly different issue. I’ve head to change my header back to a predefined header template because it was really too awful with the background loading.
The issue I’m seeing is slightly lower down on the front page (the background colour around the grid). The most annoying however, is on posts (click on any posts like this one: https://nordsip.com/2019/03/08/norway-confronts-oil-risk/)
You can see that the background white box that is behind the headline is slow to appear and it means that the black header is seen against the picture, which doesn’t look good.
When I tried to change the site heather to a custom template, the background was also slow to load, and it just wasn’t good enough for me to leave it up.
I really hope you can help me!
Best,
Aline
Hi,
I see the problem there . It is happening because of the same 1 second opacity transition. Try to enter this code in the theme panel custom CSS section
.td-js-loaded .td-element-style {
transition: none!important;
-webkit-transition: none!important;
}
Then check if the same happens. The transition should be removed from all elements. Let me know.
Thanks
Hi Simon,
The “fade” effect has disappeared in some places (not on the front page apparently) but the background still loads last, which means that the headline in the posts still appears against the picture background first.
Before the last update (9.6 I believe) this didn’t use to happen. It used to appear at the same time as the headline, which was, of course, a lot better.
By the way, on the front page, the colour of the lines between the images of the big grid still fades in and, again, it wasn’t like that before the update. Whether it fades or not is not as important as the background loading BEFORE the pictures or the headlines (not the opposite).
Would you know if there is a way around it?
Here you can see how it looks if I use a custom header:
https://nordsip.com/insights-research-library/
I can’t use it like that on the front page.
There would be a solution, please enter this code in the theme panel analytics section
– http://prntscr.com/n0iauw
<style>.td-header-template-wrap .td-element-style {
background-color: #003300!important;
}</style>
Then check if the same happens. Let me know.
As you can see, it did not work unfortunately.
Also, this is not going to solve the problem on the posts where the white background to the text of the headline comes up after the text.
Isn’t there a possibility to avoid having the backgrounds load last instead? This was something that was possible in the previous versions.
As far as I know the background was always loading like this, sorry for all these inconveniences.
This should work, remove the previous codes, then enter this one in the analytics section, header script field
<style>.td-js-loaded .td-element-style {
transition: none!important;
-webkit-transition: none!important;
opacity:1!important;
}</style>
If the problem remains, please send us an email at contact@tagdiv.com and provide admin login. Include a link to this topic in the email. Let us know.