How to add unique links to 2 graphics in Header Widget

[TheBean]

I’ve just started with extreme (was with pro.)

My intent is to have a header with 2 graphics each linking to a specific page (logo on the left link to home page / graphic on the right link to financing page)

Is that even possible?
I have it set up the way I want it to ‘look’ by using the header widget (altho it needs some margins left and right.)
But (obviously) only looks good when looking at it desktop full screen (not responsive.)
And mobile is a mess.
whaa.afrankdiscussion.com.

Any help would be welcome!

[TheBean]

Yeah…. I’m way closer by using Weaver X Text 2!
the logo on the left isn’t responsive but it’s pretty close.
Is there a way to have that more responsive like the graphic on the right side of the header widget!

[scrambler]

You need to start by explain how you want the two image to behave on mobile.

Do you want them to stay side by side just get smaller, or do you want them to stack on top on each other when the screen gets smaller like a phone.

1- If you want them to stay side by side on desktop and small tablets, but stack on phones, you can use the Header Widget Area set for two columns, as these will automatically transition to stacked on phones

Set the Header widget area to two columns in Main options > Header > Header Widget Area

Drop two text widgets in Appearance > Header Widget Area.

Put your linked graphics in each one, adding inline style of max-width:100% for the image like below

<a href=”linkurl”><img style=”max-width:100%;” src=”imageurl” /></a>

Then once in place we can help fine tune padding, alignment etc…

2- If you want them to always stay side by side and just get smaller, and if they can each use half of the width, you can use the text 2 widget, with the html like above for each image.

If you need a different width for each widget, you can just use divs in a single text widget like below

<div style=”float:left;width:30%;”>

<a href=”linkurl”><img style=”max-width:100%;” src=”imageurl” /></a>

</div>

<div style=”float:left;width:70%;”>

<a href=”linkurl”><img style=”max-width:100%;” src=”imageurl” /></a>

</div>

[TheBean]

Sorry about that
I’m thinking stack

[scrambler]

We cross posted while I was editing my post, read solution 1 above then

[TheBean]

PERFECT!!! I started with using 2 text widgets but struggled with the responsive display. Will mess with both options!

[Author]

Posts