Community Forums › Forums › Archived Forums › Design Tips and Tricks › Full clickable header image area
- This topic has 7 replies, 4 voices, and was last updated 10 years ago by
germandude.
-
AuthorPosts
-
January 21, 2015 at 5:42 pm #138227
germandude
MemberHello 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éJanuary 22, 2015 at 11:01 am #138273Jodi P
MemberYou'll want to change the width of .title-area. 1100px should work!
January 30, 2015 at 4:59 pm #139091germandude
MemberHi 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?
January 31, 2015 at 7:07 am #139153Carlo
MemberHi 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.
January 31, 2015 at 5:26 pm #139216germandude
MemberHello 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...
February 1, 2015 at 6:38 am #139245Carlo
MemberHi 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.
February 1, 2015 at 8:06 am #139256Badlywired
MemberAn 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
February 1, 2015 at 9:19 am #139262germandude
MemberHey 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é -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.