Different logo for mobile and PC

[Ricsca]

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.

 

[Ricsca]

With ChatGpt I created some code to insert into extra.less if anyone wants to use this option.



For a logo made in writing:

@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:

@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 */
    }
}