In the discussion “Remove Mobile Logo With CSS,” justin.noom wants to remove the logo from the mobile version of their Discourse instance while keeping it in the desktop version. They tried using #logo { display: none; } and .logo-pane { display: none; } in the Mobile CSS tab but it didn’t work.
simon suggested that adding #logo { display: none; } to the Mobile CSS tab should work, and advised testing by adding mobile_view=1 to the site’s URL. However, justin.noom was initially unsuccessful, until they tried using site-logo and it worked.
EmilyLewis suggested an alternative solution, adding div#logo { display: none; } to the Additional CSS field in the Admin Panel.
How easy would it be to remove the logo in the mobile version while retaining it in the desktop version? I understand that it is feasible to just “delete” the uploaded file for the mobile logo, but it would then default to the desktop.
I had tried
#logo {
display: none;
}
as well as
.logo-pane {
display: none;
}
and neither seemed to do the job - both placed in the Mobile section. Granted, I’m not the most proficient in CSS.
If you add your first CSS rule to your theme’s Mobile CSS tab, it should work to remove the logo. If you are testing this on a desktop computer, add mobile_view=1 to the site’s URL to load the mobile CSS.
I don’t think that removing the logo from mobile will be a great experience for your users. What is the problem that you are trying to solve?
It doesn’t seem to be working, I’m afraid. I attempted site-logo and logo-big as well.
In theory, I agree with you 150% - our Discourse instance exists in WebView with external surrounding UI elements that make certain default aspects of the UI redundant.
(most, if not all, of our users are mobile ones)
edit: retried with site-logo and worked perfectly!