Remove Mobile Logo With CSS

UX
1

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

1 Like
2

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?

7 Likes
3

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!

4

Hi,

You can try adding the following code to your Admin Panel > Appearance > Customize > Additional CSS field:

div#logo {
display: none;
}

Thanks!

1 Like