How use 3 logos in header?

i use this one here for two logos ( and it seems that there is no limitation to that on two)

function first_logo($logo) {
$logo .= '<strong class="logo first-logo"><a href="http://url1">' ;
$logo .= file_get_contents("http://path/wp-content/uploads/firstlogo.svg");
$logo .= '</a></strong>';
return $logo;
}
add_filter('avf_logo_final_output', 'first_logo');	

function second_logo($logo) {
$logo .= '<strong class="logo second-logo bg-logo"><a href="http://url2" target="_blank">' ;
$logo .= file_get_contents("http://path/wp-content/uploads/secondlogo.svg");
$logo .= '</a></strong>';
return $logo;
}
add_filter('avf_logo_final_output', 'second_logo');

if second logo goes to a new Domain use the target rule to a new Site etc.

and than some css is used to customise these logos:

div .logo { float: none}
.logo img {display: none}
…

so the normal logo is not used but 2 new images in the header area.
on two logos i let them float 1 to the left and the other to the right.

on Three Logos the third logo has to be centered.

But what do you want to do with those three logos on responsive case (small screens) etc.

you can see it here in a test environment:

http://webers-testseite.de/ikom/

on Small screens these two logos left and right goes to display none. But it might be possible to work with floating and let them go in a row under each other.

A great advantage of this method is that you can use svg too (and not as a background image) like in the example above.
And on that you can make some css gimmicks like color changing on hovering by f.e. in my case

svg#bonn_logo:hover .st0,
svg#bonnzeit_logo:hover .st0  {
    fill: #060;
}

• This reply was modified 8 years, 4 months ago by Guenni007.

ok – here we go:

this to functions.php of your child-Theme:

function first_logo($logo) {
$logo .= '<strong class="logo first-logo"><a href="url1">' ;
$logo .= file_get_contents("/wp-content/uploads/logo1.svg");
$logo .= '</a></strong>';
return $logo;
}
add_filter('avf_logo_final_output', 'first_logo');	

function second_logo($logo) {
$logo .= '<strong class="logo second-logo"><a href="url2">' ;
$logo .= file_get_contents("/wp-content/uploads/logo2.svg");
$logo .= '</a></strong>';
return $logo;
}
add_filter('avf_logo_final_output', 'second_logo');

function third_logo($logo) {
$logo .= '<strong class="logo third-logo"><a href="url3" target="_blank">' ;
$logo .= file_get_contents("/wp-content/uploads/logo3.svg");
$logo .= '</a></strong>';
return $logo;
}
add_filter('avf_logo_final_output', 'third_logo');

you can use png/jpg as well!

this to quick css ( you have to play with these values because it is dependent on your header givings and logo dimensions etc.)

div .logo { float: none}
.logo img {display: none}

.html_header_top.html_logo_center .logo {
    left: inherit;
    transform: inherit;
}
.logo.first-logo {
    float: left;
    width: 350px;
    z-index: 4
}
.logo.second-logo {
    left: 50% !important;
    transform: translate(-50%) !important;
    z-index: 3;
}
.logo.third-logo {
    width: 100%;
    z-index: 2
}
.logo.second-logo a {
    width: 450px;
}
.logo.third-logo a {
    float: right !important;
    width: 120px;
}
.logo.first-logo a, .logo.second-logo a, .logo.third-logo a {
display: inline-flex
}

some settings here are only vor svg use (width of logo a f.e.)

i decided to go the easy way to set on small screens that only the important logo is shown and the others are on display none