Load different logo on mobile

Question

I’m creating a website for a charity, but haven't got a lot of experience.

If you view the website on desktop (https://walkministries.org.uk/newsite/) the logo is blue on a light grey background.

But when you switch to mobile, the logo moves to a different header area. On mobile, it loads onto a blue background. This makes the logo disappear because it’s the same colour as the background colour.

Is there a way to load a different version of the logo for mobile/responsive? I have a light/white version of the logo, which does show in sticky mode when you scroll on mobile. It just doesn't load that logo as your first load the page on your mobile device.
I can't seem to get help from the theme creator.

Thank you!

The page I need help with: https://walkministries.org.uk/newsite/

Answer 1

Seems to be you have selected the incorrect "light logo" for the mobile view. As I inspected code and noticed that the "light logo" is actually the dark one! Replace that logo with white one and it should be just fine.

And if you don't want to play around with the theme setting, Just go to wp-admin > Appearance > Customizer > Custom CSS and add below and save it.

@media(max-width: 1199px) {
    body.switchable-logo header#header .menuzord-brand .logo-light.logo-1x {
        display: none;
    }

    body.switchable-logo header#header .menuzord-brand .logo-dark.logo-2x.retina {
        display: block;
    }
}