Reply To: 2 Logo's in header

[Tom]

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!