[Resolved] Catalyst Demo Site Query

[David]

you’re welcome

[Oisin]

Hello again,

Just coming back on the mobile logo again. Is there a way to make that logo smaller? I added: .site-logo.mobile-header-logo img {
padding: 7px;
}

But it’s still way too big compared to the items surrounding it. I can’t seem to attach an image to show you what I mean. The website is https://www.loadlabz.com/ – you can see what I mean once the page breaks for mobile.

Thanks,

Johnny.

[David]

The logo matches the height of the menu items set in the Customizer ( for mobile ) but if you don’t want to decrease the overall mobile header height then this CSS will add extra top padding to make it smaller:

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

[Oisin]

Thanks David, that worked perfect. Much appreciated

[David]

Glad to be of help.

[Oisin]

For some reason, I have no primary nav on my blog page. I’ve had a good look through the customise settings and nothing is jumping out at me. Do you know how I would go about enabling it?

[David]

Hi there,

the nav is there just its colors are transparent and white.
Adjust the colors in Customizer > Layout > Primary Navigation to see them.
If this overrides the colors on the front page then edit the Header Element you have assigned there and on the Site Header tab you can edit the Nav colors for use on that header element.

[Oisin]

Thanks, that works fine until the menu breaks to the mobile version. There seems to be no way to edit the mobile menu. It’s transparent and white also

[Leo]

Do you don’t want this part to be transparent?
https://www.screencast.com/t/XZ7TMBNR30hr

If so then try the merge on desktop only option:
https://docs.generatepress.com/article/header-element-overview/#merge-with-content

[Oisin]

Hi, I do want it to be transparent on the homepage but not on the blog page. It might be easier to just use a hero image on the blog, although I really don’t like doing that.

[Leo]

Then would it work if you create a separate page hero using the merge on desktop only and use that for the blog page?

[Oisin]

Hello again,

Sorry to be bombarding you with queries. I’m just getting the final touches done on the website. I made some chages to the header so it will look ok without the header element activated. For some reason the changes I make in the customisation section are not not coming through to the site.

I can see when I inspect the element that something is overriding the changes, but I’m not sure what it could be. The two things that should be different are the size of the typeface and the header padding on top and bottom.

Here is the correct typeface size and header padding – https://www.loadlabz.com/blog/

Here is an example of these setting being rejected – https://www.loadlabz.com/why-does-page-speed-matter-in-2019/

If you look at the above page on mobile you can see the mobile menu is not picking up the dark styling I applied in the customization editor. Desktop is picking it up.

Finally, if you look at this page on mobile – https://www.loadlabz.com/blog/ – you will see that the code David provided is not being applied for some reason. Here is the code he provided:

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

It would be great if the above code could be applied across the website so I don’t have to add it to end of every page I create.

I’m very confused so any help much appreciated.

Thanks,

Johnny.

[Oisin]

https://www.loadlabz.com/why-does-page-speed-matter-in-2019/

[David]

Could you flush and disable autoptimize – some of the issues may be cache related, if not we can at least see where any conflicting CSS is coming from.

[Oisin]

Just purged Autoptimize, SG Optimise and CloudFlare. I disabled Autoptimize, also.

[Author]

Posts