Lack of interest Different logo for mobile and PC

This suggestion has been closed automatically because it did not receive enough votes over an extended period of time. If you wish to see this, please search for an open suggestion and, if you don't find any, post a new one.

Ricsca

Well-known member
Licensed customer
It would be helpful to be able to set a different logo for when the forum is viewed on a PC or mobile phone.
On a mobile phone, a smaller and shorter logo is needed than the one displayed on a PC.
For example, it would be better to display the icon as the logo on a mobile phone.
 
Upvote 0
This suggestion has been closed. Votes are no longer accepted.
With ChatGpt I created some code to insert into extra.less if anyone wants to use this option.



For a logo made in writing:

Code:
@media (max-width: @xf-responsiveMedium) {
    /* hide the default logo image */
    .p-nav-smallLogo img {
        display: none !important;
    }

    /* make the container text-only */
    .p-nav-smallLogo {
        width: auto !important;
        height: auto !important;
        background: none !important;
        display: flex;
        align-items: center;      /* vertical center */
        justify-content: center;  /* horizontal center (use flex-start if you want it on the left) */
        font-size: 20px;
        font-weight: bold;
        color: #fff;              /* white text */
        white-space: nowrap;      /* prevent line break */
    }

    /* add custom text */
    .p-nav-smallLogo::after {
        content: "SITE TITLE";
    }
}

For a logo image:

Code:
@media (max-width: @xf-responsiveMedium) {
    /* Hide the default small logo image */
    .p-nav-smallLogo img {
        display: none;
    }

    /* Replace it with a custom background image */
    .p-nav-smallLogo {
        width: 50px;                   /* fixed width for the logo area */
        height: 37px;                  /* fixed height for the logo area */
        background-image: url('path/to/your/file'); /* path to your custom logo */
        background-size: contain;      /* scale image to fit inside the box */
        background-repeat: no-repeat;  /* prevent the image from repeating */
    }
}
 
Back
Top Bottom