Full clickable header image area

[germandude]

Hello everyone,

I currently edit my lifestyle pro theme. URL is: handgepaeckguide(dot)de (not officially launched yet)

There is a little problem: I want to use the right header widget for social media icons. That is why I use a background-image as header image. Now I want to make the whole header image area clickable (-> link to homepafe URL).

Any suggestions who I can make that happen without moving the header widget section out of position?

Thank you in advance!

Best regards,
André

[Jodi P]

You'll want to change the width of .title-area. 1100px should work!

[germandude]

Hi Jodi,

thank you very much for your advice! 🙂

Changing the width of .title-area to 1100px makes the entire header-image clickable. But it also moves the right header-widget area out of postion.

I made two screenshots to illustrate the problem:

This ist the header with .title-area width=320px, with the social media-icons IN position:

http://koffer-fuer-handgepaeck.de/wp-content/uploads/2015/01/headerproblem1.png

This ist the header with .title-area width=1100px, with the social media-icons out of position:

http://koffer-fuer-handgepaeck.de/wp-content/uploads/2015/01/headerproblem2.png

Any other suggestions?

[Carlo]

Hi germandude. You've removed the icons altogether now. I looked at your screenshots but I'll need to see the site itself with the icons published to be able to solve this.

---

Comprehensive, easy to follow Genesis documentation

[germandude]

Hello Carlo Manf,

I put the social media-icons back in the right header widget. You can see now what it looks like under handgepaeckguide(dot)de.

I am looking for a solution, where the header image is fully clickable and the social media icons stay in the right header widget area at the top of th header image.

Maybe you can push me in the right direction...

[Carlo]

Hi germandude. Personally, I don't think the the way you had the icons positioned looks very good and I think they look out of place anyway. But if that's the way you want them, you can find the below code in your theme stylesheet:

.site-header .widget-area {
	color: #fff;
	float: right;
	width: 600px;
}

and replace it with this:

.site-header .widget-area {
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

Let me know if that's what you want.

---

Comprehensive, easy to follow Genesis documentation

[Badlywired]

An alternative approach could be to code in a a 'top bar' above the header and have widget areas in that.

I explain how to create a top bar and fixed top bar here https://badlywired.com/2015/02/create-bar-header-genesis/

---

My techy blog WordPress and stuff badlywired.com

[germandude]

Hey guys,

that you very much for the Input! Both of your suggestions sound good, I will try them both and let you know if which worked best for me.

Have a nice weekend!

Best regards,
André

[Author]

Posts