Archived topic
2 Logo's in header
4 replies · Started by Anonymous on May 6, 2015
Hi Tom,
I want 2 different logo's in my header. See the website: joostdonders.nl
You see now 2 logo's on the right and left. But this is, as you can see, one picture (together with the text in the middle). What I want now is to remove the logo's from this image and then upload these 2 different logo's on the same place ''in'' the header (with divs or another method?).
The reason of this change is: I want one logo that has to link to the homepage of this site and the other logo has to link to another website.
I hope you understand me?
Thanks in advance!
Hi there,
I would do it like this:
1. Upload the background gradient (with no logos or text) as your header background image.
2. Remove the header from the Customizer.
3. Add something like this in GP Hooks in the "Before Header Content" hook:
<div class="grid-container grid-parent">
<div class="grid-25 header-left">
<a href="LINK LOCATION"><img src="FIRST IMAGE SRC" alt="" /></a>
</div>
<div class="grid-50 header-middle">
<a href="LINK LOCATION"><img src="SECOND IMAGE SRC" alt="" /></a>
</div>
<div class="grid-25 header-right">
<a href="LINK LOCATION"><img src="THIRD IMAGE SRC" alt="" /></a>
</div>
</div>Then I would add this CSS:
.header-left {
text-align: left;
}
.header-middle {
text-align: middle;
}
.header-right {
text-align: right;
}That should be a pretty solid start :)
If you don't want to split them up like this, you could use an image map: https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html
Using the tool above, you can link certain parts of your main image.
It will then give you HTML to place into the "Before Header Content" hook.
Hope this helps!
Hi Tom,
Thanks for your response!
It seems to work, but the left and right image don't show up. The middle one does show up.
How to solve this?
It seems to work now. I think it took a while to load it or something? ;) I changed nothing.
Thank you!!
No problem! :)
