Mobile header logo not visible on mobile

[Mark Roberts]

Hi there,

I have set a mobile logo in the Header section under the customiser,
but this isn’t visible on mobile, only as an example.
When I view the site on my mobile phone, it still shows the desktop logo!

Site is not yet online, so if you need login info, just let me know.

Kind regards,
Mark

[Zex]

Hello, Mark!

Please try to add the following codes into Customizing->General->Additional CSS:

@media only screen and (max-width: 480px) {
    .header_v1 #agama-logo .logo-desktop,
    .header_v1 #agama-logo .logo-tablet{
			display: none!important;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 992px) {
    .header_v1 #agama-logo .logo-desktop,
    .header_v1 #agama-logo .logo-mobile{
        display: none!important;
  }
}
@media only screen and (min-width: 993px) {
    .header_v1 #agama-logo .logo-mobile,
    .header_v1 #agama-logo .logo-tablet{
        display: none!important;
  }
}
 

If you try the above code and still no success, please give me your address to your website and WP-Admin credentials in the private reply.

Thanks

Regards

[Mark Roberts]

Hi Zex,

Didn’t really work 100%.
The logo on mobile disappeared completely.
I then added the following to the code and now it works.

@media only screen and (max-width: 480px) {
.header_v2 #agama-logo .logo-mobile{
display: inline!important;}
}

[Zex]

Hello Mark!

I’m glad you found the solution that works for you.

In that case, then the problem was not what I assumed from your post. Try deleting the code I gave you. I don’t think you need it in this case.

Regards

[Mark Roberts]

Hi again Zex,

I still need parts of the code you gave me and also had to add the following for mobile, tablets & Desktop.
In essence you have to code for the 3 different display sizes (Mobile, Tablet and Desktop).
and use “display: inline!important;” for each of them separately.
You then use your code for Mobile and Tablet only and use “display: none!important;” for both
logo-mobile and logo-tablet.
Don’t use this “display: none!important;” for desktop, otherwise you don’t have a visible logo on the larger
tablet (+ 992px) and desktop size for some reason.

Here below is the code that works for mobile, tablet and desktop.

Regards,
Mark

@media only screen and (max-width: 480px) {
   .header_v2 #agama-logo .logo-mobile{
			display: inline!important;}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 992px) {
   .header_v2 #agama-logo .logo-tablet{
			display: inline!important;}
}

@media only screen and (min-width: 993px) {
   .header_v2 #agama-logo .logo-desktop{
			display: inline!important;}
}

@media only screen and (max-width: 480px) {
   .header_v2 #agama-logo .logo-desktop,
   .header_v2 #agama-logo .logo-tablet{
			display: none!important;}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 992px) {
   .header_v2 #agama-logo .logo-desktop,
   .header_v2 #agama-logo .logo-mobile{
       display: none!important;
	}
}

[Zex]

Hello, Mark!

Thank you for your feedback!

There are always several ways to solve the problem and, of course, you can use whatever works for you.

Regards

[Author]

Posts