Changing logo on mobile version

i’d like to have two different logo, on a desktop version for my website and one for mobile versione.
I found this topic: Change logo on mobile version + Change width limit for the nav menu

this is my website:

The suggested solution is almost perfect: the logo is not centered and on tablet version it’s repeated. any suggestion? thank you very much.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header .col-md-4 > a > img {
        display: none;
      .site-header .col-md-4 > a {
        display: block;
        width: 110px;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        background-image: url('');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;


It works! thank you very much.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.