参考サイトのは、モバイルヘッダーメニューを使っている場合のコードなのだと思います。

匿名さんのサイトはモバイルヘッダーメニューを使っていないので、

/*1023px以下の時*/
@media screen and (max-width: 1023px) {
    /*元のロゴを消す*/
    img.site-logo-image {
        display: none;
    }
    /*ロゴの画像を指定したものにする*/
    .logo-image {
        background-image: url( https://itsallabouthouse333.com/wp-content/uploads/2021/04/mobilelogo_kore.png );
        background-size: auto 30px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

とかが良いのかなと思いました。

visibility: hidden;よりdisplay: none;で消した方が良いのかなと思って変えたので、お好みで…。

visibility: hidden;にしているのは、背景画像の表示領域を確保するためだと推測されますので、display: none;にすると、高さや幅が確保されなくなるような気がします。

aタグに指定すれば、クリックできる領域と一致するかと思ったので、以下のように試しに書いてみました。

これでうまくいくかどうかは、よくわかりません。

表示領域の幅と高さを固定してしまうので、小さなスマホの幅よりもやや小さな幅の画像を設定する方がいいかもしれません。

@media screen and (max-width: 1023px) {

  .site-logo-image.header-site-logo-image {
    display: none;
  }

  .logo-header.logo-image a {
    display: block;
    width: 300px;/*背景画像と同じ幅を指定*/
    height: 60px;/*背景画像と同じ高さを指定*/
    background-image: url( https://itsallabouthouse333.com/wp-content/uploads/2021/4/mobile-rogo.png );
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

}

ちなみに、visibility: hidden; ですと、PC用の画像のサイズ領域がそのまま維持されるため、現況のように無理やり小さくする必要が出てきます。

上記のコードは、はるさんのおっしゃるように、display: none; にして、あらためて、モバイル用の背景画像の表示領域を指定するというやり方です。

ロゴなので、クリック（タップ）できる方がよいのかと・・