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



  • 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.



  • 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/)


  • Global Moderator

    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.



  • @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?


  • Global Moderator

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



  • Thank you PitaJ! Fix is working amazingly!



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


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.