Two Header Pictures

well there is for example the opportunity to insert two images with logo function – each with a different link.

you can see here a Quick solution: https://webers-testseite.de/
not optimized for responsive case : because — sorry no time now.

it is more or less only functions.php of child-theme and a bit css.

if you like to insert an svg or png/jpg it is a bit different:

/** for svgs only   ******/
function first_logo($logo) {
$logo .= '<span class="logo first-logo"><a href="path to an url1">' ;
$logo .= file_get_contents("/wp-content/uploads/logo1.svg");
$logo .= '</a></span>';
return $logo;
}
add_filter('avf_logo_final_output', 'first_logo');	

/** for the normal case of a png or jpgs   ******/
function second_logo($logo) {
$logo .= '<span class="logo second-logo"><a href="url2" target="_blank">' ;
$logo .= '<img src="/wp-content/uploads/logo2.png"/>';
$logo .= '</a></span>';
return $logo;
}
add_filter('avf_logo_final_output', 'second_logo');

Comment: You see that these images stay a “logo” only a second class (fist-logo, second-logo, etc.) is given to them.

on some reasons it is better to get rid of the logo inserted by enfold options dialog. (z-index, positioning etc.)

if you will place a svg Graphic than a bit more is to be done in quick css!

the width an heights are dependent on your graphics – so you have to play with it.

div .logo { float: none}
.logo:first-child img { display: none}
.logo img {max-width: 320px}
.logo.first-logo {z-index: 3}
.logo.second-logo {z-index: 2}
.logo.second-logo {width: 100%}
.logo.second-logo a {float: right}
.logo.first-logo a, .logo.second-logo a {display: inline-block}

and in responsive case (play with the 768px concerning to your logo-images) :

@media only screen and (max-width: 768px) {
.logo.second-logo a { float: left }
.responsive #top .logo { height: auto }
.responsive #top .logo:first-child { display: none }
}

btw – please tell me the code how you get it in logo container.

you can see here a page with that construct and your logo (btw i take the one logo twice – i do not see any difference)

https://webers-testseite.de/kokon/pages/meet-the-team/
(btw.: this is with logo left menu below – it is easier to find the css rules for that )

so that is the reason why i have to ask you for the deeper sense behind that – only symetrical reasons?
look to the responsive case if you shrink your browser window to something smaller than 500px .
A construct with two different logos with different links like here : https://webers-testseite.de/
the one link goes to root the other to a new site on a blank target. That makes sense.

Also – anhand deiner Seite sehe ich ja, dass wir uns wohl auch auf deutsch unterhalten können.

Du musst noch einige Einstellungen verändert haben, was das responsive Verhalten betrifft. Denn wenn du mein Browserfenster verkleinerst, siehst du keinerlei Sprünge bezüglich der Größe.

Das Menu kannst du platzieren wo du willst, links mittig oder rechts. via Quick css – sag wie du es willst. ausserdem hast du in den Enfold Einstellungen wohl die Variante mit den kleinen Separatoren gewählt. – Bei mir jetzt mal nicht – ist Geschmackssache.

Welchen Grund hat es , dass du einmal das eine dann das andere Logo einsetzt? ich sehe keinen Unterschied – ausser dem Größenunterschied !
Weshalb dann auch im Frontend die Logos unterschiedlich groß sind !

Du kannst in beide Codes die gleiche Bilddatei setzen

mit dem shrinking header könntest Du auch folgendes machen:

bitte scrollen und oder browserwindow verkleinern

https://webers-testseite.de/kokon/pages/about-us/

bitte nimms mir nicht übel – aber es wäre schön, wenn Du dir erstmal mit dir selbst einig bist, was du möchtest – heißt wie dein Header aussehen soll, und wie er reagieren soll, wenn geshrinkt wird bzw . auf kleinen Screens aussehen soll.

Momentan sieht der Header wieder ganz anders auf deiner Seite aus, also – gerne steige ich hier wieder ein, wenn es klar ist wo es hingehen soll.