Question: Is it possible to add second/third image to header?

[Shane]

Hey Tom!
So I have recently got the Premium version of Generate Press and am developing our new site using it.
I have my image header set to the left of the header section, but I had hoped to add a second image to the right alignment of the header. Is this possible?

I didn’t want to make it all one large image, because i need it to scale onto mobile devices, so ideally the image on the right would slip under the image on the left as the screen scales to a smaller size.

Sorry I cant post a link to show what I mean as I haven’t made the site live yet…

Cheers 🙂
Shane

[Tom]

Hi Shane,

You can use GP Hooks for this.

First, remove your logo from the Customizer.

Then, in GP Hooks, add something like this to the “Before Header Content” hook:

<div class="grid-50">
      <img src="URL TO FIRST HEADER IMAGE" alt="YOUR SITE NAME" />
</div>
<div class="grid-50 right-side-header">
      <img src="URL TO SECOND HEADER IMAGE" alt="YOUR SITE NAME" />
</div>

Then add this CSS:

@media (min-width: 769px) {
      .right-side-header {
            text-align: right;
      }
}

Let me know if that does the trick or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Shane]

Hi Tom
Thanks for your help on that – got it sorted!
Cheers,
Shane

[Tom]

Awesome, no problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts