Shop Categories

X

Reply To: Mobile header logo not visible on mobile

Home Forums Agama Pro Mobile header logo not visible on mobile Reply To: Mobile header logo not visible on mobile

#19405
Mark Roberts
Participant

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;
	}
}