- This topic has 4 replies, 2 voices, and was last updated 7 years, 9 months ago by
Tom.
-
AuthorPosts
-
May 6, 2015 at 6:16 am #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!
May 6, 2015 at 1:49 pm #106142Tom
Lead DeveloperLead DeveloperHi 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!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 6, 2015 at 11:40 pm #106244Kevinn02
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?
May 6, 2015 at 11:56 pm #106245Kevinn02
It seems to work now. I think it took a while to load it or something? π I changed nothing.
Thank you!!
May 7, 2015 at 7:39 am #106329Tom
Lead DeveloperLead DeveloperNo problem! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.