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 9 years, 1 month ago by germandude.
-
AuthorPosts
-
January 21, 2015 at 5:42 pm #138227germandudeMember
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éJanuary 22, 2015 at 11:01 am #138273Jodi PMemberYou'll want to change the width of .title-area. 1100px should work!
January 30, 2015 at 4:59 pm #139091germandudeMemberHi 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 #139153CarloMemberHi 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 #139216germandudeMemberHello 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 #139245CarloMemberHi 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 #139256BadlywiredMemberAn 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 #139262germandudeMemberHey 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.