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

AnthonyM

I created a logo that I'm happy with for my site, however it's not legible at the default size. It's not stylized text. When using that awesome Slick theme, the larger logo fits the board and it just pushes the categories downward. Which is great. On mobile though this really breaks things. I can appreciate using only text up there in mobile to save bandwidth costs but for desktop, I'd like to embellish a little. Instead of trying to rework the branding into a stylized text like the nodebb logo, I'd like to see if its possible to use 2 different logos.
Thank you.

alff0x1f

I think only way to do it - change template.

If you interested I can give some tips (I make it on my own forum http://forum.veloufa.ru/)

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