[Resolved] 2 Logo's in header

Home Forums Support 2 Logo's in header

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #106062
    Kevinn02

    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!

    #106142
    Tom
    Lead Developer
    Lead Developer

    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!

    #106244
    Kevinn02

    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?

    #106245
    Kevinn02

    It seems to work now. I think it took a while to load it or something? 😉 I changed nothing.

    Thank you!!

    #106329
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.