How can I add more logos with links on the header?

Dear Yigit,
Again thank you for your response.
But I’m super-new to all this. If you could write the code, exactly the way it should look, so I can just copy and paste would be super appreciated.
I found the folder and the helper-main-menu.php file
I placed the 2 extra logos already inside enfold/images/layout folder:

images/layout/kuvataideakatemia_x_gray.png
images/layout/general-studies.png

Thank you so much in advance,
G.

Dear Josue,
Thank you for your response but when I did that, instead of showing the 3 different logos, it’s now showing 3 times the first logo!
Eventhough I upload all 3 different logos in inside enfold/images/layout folder, and copy and pasted exactly what you posted.
Any idea why?
Also, as you can se here, the 3 logos only appear when the browser window is very narrow: http://www.aukea-x.fi/3-logos-but-only-in-narrow.png
At normal width only one is there: http://www.aukea-x.fi/2-other-logos-missing.png

Thank you in advance
G.

ps. Also to have in mind, after we finally get the 3 different logos to show-up, each of them has to link to a different website. Is that possible?

Dear Yigit,
Thank you. At least I managed now for the extra 2 logos to appear on the page with links.
But now, they are not scaling in the header when I scroll down.
I would like them to scale like the aukea logo which I used to substitute the “ENFOLD” logo (on the Enfold theme options)
I publish my page so you can see what I mean: http://173.254.28.59/~aukeaxfi/think-tank/
Also I saw that they are also displacing the menu on the top right (home think tank and search)
Any help much appreciated,
best wishes,
G.

Dear Josue and Yirgit,
Thank you so much for your help, that solved the scaling! But now there is only one very very last thing.
All 3 logos are layering on top of each other! So I need a way that they distribute evenly at the top…
I tried fixed padding like this:
echo “<strong class=’logo’>“;
echo “<strong class=’logo’>“;
but when you see them in smaller screens or when you make the window smaller they pile on top of the menu on the right, so obviously it’s a mistake on my part to put fixed pixel padding instead of something smarter. But I have no idea how to code to fix it.
Here is the link to the way it looks now with the fixed padding so you can see what I mean:
http://173.254.28.59/~aukeaxfi/think-tank/
When you make the window smaller, or when you see it in the ipad they go behind the menu on the right.
on the iphone the 2 extra logos disappear (which I’m ok, I think is better than piling on top of the menu)
Would you be so kind to send the exact code so that doesn’t happen
That’s the very very last thing to have it finally working properly
Thank you so much in advance,
G.

Hi Josue,
Thank you, at least for now the logos disappear before they overlap with the menu on the right.
But is there a way in which the padding between the logos adjusts proportionally according to the width?
In a way that the logos resize and distribute evenly at the top (without overlapping on the menu on the right)
Right now I did the only thing I know how to do which is adding a fixed padding in pixels values:
echo “<strong class=’logo’>
and I know it’s a mistake, because what I want is that the padding resizes and distributes evenly depending on the width of the window?
Is there a way to do this?
Also with the solution you sent, when the header and logos resize (when you scroll down) there is enough room for the 3 logos to appear, but as you can see in this image (http://www.aukea-x.fi/fixed-padding.png)
the 3rd logo is already gone, but if there was a responsive way to adjust the padding, then we didn’t have to make them disappear just yet.
and also the flexible padding and resizing will allow to see the 3 logos in an iPad, right now because of the width of the iPad window, the 3rd logo never shows up…
Here is the website again, so you can see it in an iPad: http://www.aukea-x.fi
Thank you again for your help in advance,
G.