[Resolved] Catalyst Demo Site Query

[Oisin]

The desktop site is now picking up the dark menu, perfect.

So, it’s just the transparency still making it through to mobile – https://www.loadlabz.com/why-does-page-speed-matter-in-2019/

And the large logo on some mobile pages – https://www.loadlabz.com/blog/

[David]

Any chance you can disable SG Optimizer as the CSS thats effecting the Mobile Headers colors are in its ‘critical CSS’. Personally i do not use it, i see too many CSS conflicts because of it.

[Oisin]

Ok, just disabled it there. What tools do you use to increase your PageSpeed score?

[David]

Ok so set your Customizer > Colors > Primary Navigation to have the black background.
In the Merged Header Element you have you can edit the Nav colors and set them to transparent on the Site Header tab.

We just use Autoptimize, it ( effectively ) does the same thing as SG Optimizer just without a lot of the hassles.

[Oisin]

Thanks David,

The nav is looking great on mobile now.

If I could ask you to look at the logo issue everything should be in order. You can see it on this page on mobile – https://www.loadlabz.com/blog/

Your code isn’t being picked up for some reason. It would be great if there was a way to apply this code across the website.

.site-logo.mobile-header-logo img {
padding: 18px 0 !important;
}

[Leo]

That CSS should work on every page.

How are you adding it currently?

[Oisin]

In a previous message, I followed instructions from a link David shared. The instructions told me to apply that code using the Simple CSS box found at the bottom of my WordPress page editor.

[Leo]

WordPress ignores all metabox values on index pages (blog, archive etc).

To apply that code on the blog page, try this in the SimpleCSS global editor:

body.blog .site-logo.mobile-header-logo img,
body.archive .site-logo.mobile-header-logo img {
    padding: 18px 0 !important;
}

[Oisin]

Hi Leo,

I applied that code but it doesn’t seem to have any effect.

[Leo]

I don’t see the code being added still.

Where are you adding it this time?

Looks like there is something in Additional CSS field in the customizer.

Can you add it in there instead?

Let me know 🙂

[Oisin]

Ok, just added it to the additional CSS box and it’s now looking great. Thanks very much for your help Leo and David. I’m going to write up another glowing review for this theme.

[David]

Glad we could be of help

[Oisin]

Hi Guys,

Just a quick query regarding a GTmetrix error. I recently set up a cookie-free domain but since I did this I’m getting an error about a certain image being pulled from two URLs.

https://static.loadlabz.com/uploads/2019/04/Load-Labz-White.png
https://www.loadlabz.com/wp-content/uploads/2019/04/Load-Labz-White.png

Should I just do a redirect or is there some sort SQL query I need execute to resolve the issue?

Thanks,

Johnny.

[David]

The static.loadlabz image is the image you have added to Site Identity > Logo.
Make a copy of your original logo and change the name ( WP doesn’t like replacing same name images… ) – then upload the renamed logo image and replace the one used in Site Identity.

[Oisin]

Cheers Tom,

I’ve always been puzzled by WP’s confusion with same name uploads. Operating systems seem to figure it out just fine.

I’ll try this fix shortly. One other question. I’m so close close to scoring that stupid 100 in Google PageSPeed. I relaise it’s a bit of a waste of energy but I need it for my portfolio.

It’s the “Ensure text remains visible during webfont load” diagnostics error featured under the opportunities heading and results- https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.loadlabz.com%2F&tab=mobile

It’s telling me “Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.” Is there a way to resolve this?

[Author]

Posts