skip to Main Content

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..

2

Answers


  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.

    Login or Signup to reply.
  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;
        }
        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search