[bobgarrett]

How do I remove the delay in the page titles appearing? I have tried then following which seems to have affected what I see in “inspect” of the css but the delay is still there.

body:not(.home) .custom-header-content {transition: unset;}
.custom-header {transition: unset;}

[Sakin]

@bobgarretthomenetworks-co-uk: Sorry for the late reply, looks like we missed this topic. We usually reply within 24 hours. So, anyone, who didn’t hear us for more than 24 hours there must be an issue with your notification system just comment or contact us directly at https://catchthemes.com/contact-us/.

I don’t see a delay on your page title, can you tell me which page has that issue?

If you are talking about the padding-top for .custom-header then that delay is there due to the script to estimate the padding needed for fixed header .site-header. For that, you need to do a manual header padding-top as per your site and add the following CSS in the “Appearance => Customize => Additional CSS” box:

.custom-header {
 padding-top: 139px;
 transition-duration: 0s;
}
@media screen and (min-width: 480px) {
 .custom-header {
  padding-top: 203px;
 }
}
@media only screen and (min-width: 568px) {
 .custom-header {
  padding-top: 182px;
 }
}
@media only screen and (min-width: 742px) {
 .custom-header {
  padding-top: 139px;
 }
}
@media only screen and (min-width: 1024px) {
 .custom-header {
  padding-top: 153px;
 }
}
@media only screen and (min-width: 1200px) {
 .custom-header {
  padding-top: 214px;
 }
}

Regards,
Sakin

[bobgarrett]

Sorry for the long delay before responding. The delay on loading a page seems to be on every page except the home page.

As an example, this page https://www.ccrc.co.uk/about-chichester-cruiser-racing-club/ (and all the rest) load the top banner and the content and then after a short delay the page title appears.

Looking at the Chrome waterfall analysis the first item is “about chichester cruiser racing club” and takes ~2s. Then there are whole load more other small “GET”s until another “about chichester cruiser racing club” which takes ~3s.

Are you able to see this too?

 

[Sakin]

Can try adding the following CSS in “Appearance => Customize => Additional CSS” box:

.custom-header { transition: padding 0s; } 

[bobgarrett]

I had previously put this css in with 0.1s as the timing. I have also tried making it !important. But still the delay.

[Sakin]

But 0.1s is still timed. You need to move it 0s.

[bobgarrett]

I had tried 0 and it is now 0 but still has delay.

[Sakin]

I see that the JS adds the padding on top after analyzing its height. So, it takes a bit of time. You can manually add padding on top as per your content. Add the following CSS in the “Appearance => Customize => Additional CSS” box after that transition CSS:

.custom-header {
 padding-top: 139px;
}
@media screen and (min-width: 480px) {
 .custom-header {
  padding-top: 203px;
 }
}
@media only screen and (min-width: 568px) {
 .custom-header {
  padding-top: 182px;
 }
}
@media only screen and (min-width: 742px) {
 .custom-header {
  padding-top: 139px;
 }
}
@media only screen and (min-width: 1024px) {
 .custom-header {
  padding-top: 153px;
 }
}
@media only screen and (min-width: 1200px) {
 .custom-header {
  padding-top: 214px;
 }
}

[bobgarrett]

I have implemented that and it works so thank you so much.

[Author]

Posts