logo not changing in mobile devies in wordpress site

Question

I have a problem, that when i view my site from mobile devices, it shows the default logo of the theme, I have updated the mobile logo in theme options, but also the logo is not changing..

So is there any way to find the default logo in theme coding and then replace it with my custom logo in mobile devices...or any other way!

I tried to hide the deafult logo and use custom logo for mobile devices by this code:-

@media (max-width: 480px) {
    .site-title a {
        background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        overflow: auto;
    }
}

}

@media (min-width: 480px) and (max-width: 768px) {
    .site-title a {
        background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        display: block;
    }
}

The above code does not work..

In desktop devices the logo is working fine, only problem with in android devices..

Answer 1

Wordpress does create a lot of problems. I would suggest clearing cache for a proper update of the website. If you are using wordpress and any page builders, you can create the header in your Elementor Theme Builder and in there you can change from the Responsive tab anything you want to show in the Mobile and not in the Desktop.

Answer 2

Try This:

 @media (max-width: 480px) {
        .site-logo  {
            background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        background-size: cover;
          padding: 0px;
          margin: 0px;
          width: 150px;
          height: 50px;
        }
    .site-logo img
    {
    display:none;
    }
    }