Is there a way to use a seperate logo for mobile version?

PitaJ

You can do it with custom CSS:

@media (max-width: 767px) {
    .header .forum-logo {
        background: url([path to image]) no-repeat;
        background-size: contain;
        padding-left: [width of image on mobile]px;
        overflow: hidden;
    }
}

This is an example replacing an image that is displayed as 95px wide on mobile with the Google logo:

@media (max-width: 767px) {
    .header .forum-logo {
        background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png) no-repeat;
        background-size: contain;
        padding-left: 95px;
        overflow: hidden;
    }
}

You can find out how large an image is on mobile by changing the browser window down to about the size of a phone screen and then right clicking on the image and hitting inspect element.

AnthonyM

@PitaJ Thank you. When I do this the original logo is also still there. It sits above the google logo. When I remove the site logo, it all goes away.

@alff0x1f are you using the custom headers plugin on your site?

PitaJ

@AnthonyM well, is your site public? I can see if I can hack together a quick fix.

AnthonyM

Thank you PitaJ! Fix is working amazingly!

alff0x1f

@AnthonyM yep, I change custom theme (most of all css, but also some things in theme templates, include header)

Tayyaba

Hey @anthonym, I want to do the same, and I encounter the same issue as you have mentioned about repeating of the logo.

Can you please tell me how did you fix that? Btw, I'll try one more time the solution given by @PitaJ.

Tayyaba

@anthonym I tried the solution given by PitaJ, but still I'm facing the issue of repetition of the logos.

I'll be really thankful to you if you please share your solution, thanks.

Eminent

This works, but it creates a double logo since it doesn't remove the normal logo. How do you fix that?

On another note, why isn't this built into nodebb? Using a bigger logo for your desktop site and a smaller one for your mobile site is pretty normal. For me, it looks fine when logged out, but once I log in, the logo gets moved to another line since it runs out of space.

julian

@Eminent probably because nobody's asked for it beyond this one forum post

You could always open a new feature request on our issue tracker, I think there's some merit to it.

Eminent

@julian The Feature Request subcategory?

crazycells

@Eminent said in Is there a way to use a seperate logo for mobile version?:

@julian The Feature Request subcategory?

you should do this here: https://github.com/NodeBB/NodeBB/issues