Mobile header logo not visible on mobile
Tagged: mobile header logo
- This topic has 5 replies, 2 voices, and was last updated 3 years, 2 months ago by
Zex.
-
AuthorPosts
-
October 19, 2019 at 4:41 pm #19377
Mark Roberts
ParticipantHi 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,
MarkOctober 19, 2019 at 5:43 pm #19380Zex
ModeratorHello, 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
October 19, 2019 at 9:05 pm #19385Mark Roberts
ParticipantHi 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;}
}October 20, 2019 at 8:21 am #19400Zex
ModeratorHello 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
October 20, 2019 at 12:29 pm #19405Mark Roberts
ParticipantHi 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; } }
October 21, 2019 at 9:08 am #19431Zex
ModeratorHello, 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
-
AuthorPosts
- You must be logged in to reply to this topic.