Hallo MudGuard,

Ich bin ja immer für sehr kompakte Header auf Seiten, die ich öfter besuche - spart im Laufe der Zeit viel scrollen.

Das bin ich auch. Und ich nutze so wie du hochauflösende Displays ;-) Aber ich habe das etwas anders gelöst:

Das wird mit ein paar Regeln sehr einfach erreicht:

@media only screen and (min-width: 35em) {
  .logo.flex-item h1 {
    background: url("/assets/selfhtml-forum-small-f638276f9bf02ca017bac8389c01c3a95504d79a1dd21e9f78bbf232ff749541.svg") no-repeat center top;
    width: 100%;
    height: 46px;
  }
}

Das sieht IMHO noch gut aus und spart echt viel Platz.

Farblich würde ich den Balken ganz oben noch an die Logo-Farbe angleichen, die Schrift darin dafür fett machen. Ist m.E. bei Negativschrift (helle Schrift, dunkler Hintergrund) besser lesbar.

Da habe ich mich an die Vorgaben von @Performer gehalten. Was meint der denn dazu?

LG,
CK