Header Image, Header Widget: Responsive Alignment Problem

[grottocom]

Hi. I’m having the same issue in different themes/different sites. Header Widget items float to cover header on mobile devices (or shortened browser windows). Been hunting in forums for tips, but need a bit more help. Please and thank you.

We’ve got a Custom Header graphic at 1140 x 150 pixels (logo, tagline, background graphic), then the Header Widget area includes social media icons and an image widget (just the icons on the second site listed below). Set the CSS to place the widget area nicely for desktop viewing.

#header .widget-area {
float: right;
margin: 40px 40px 20px 0;
width: 210px;
z-index: 100;
}

Thought I could change the header image to be just the logo (a transparent GIF, perhaps?) at 142 x 150 pixels then set the other part of the graphic as a background? But I can’t seem to make that work.

http://www.lakecountyhaven.org/
(secondary problem is load time for some reason)

FYI: Same problem, different theme, different site. (Though header may require redesign to work?)

http://www.lindenhealthcenter.com/

If that solution would work, can someone step out how to accomplish this properly?
OR, do I need a different approach?
Thanks! Top link is a local shelter and we’re keen to get it working properly right away to inspire holiday donations.

http://www.lakecountyhaven.org/

[Robin]

I don't know if it's possible to swap out the custom header for your own image, but you can scrap the custom header and use your own logo/image from the get go. Here's a tutorial about how to go about it. (That's not the only one, but if you google "genesis use logo header", you'll see others, but this seems to hit all the high points.)

If you put your logo in your theme files instead of using WP like she does, you may need a second/smaller version for your media queries. I usually have a large logo and then one smaller one, which is enough to cover the bases.

HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[grottocom]

Thanks, Robin
The tutorial was a great tip. Though it seemed to not address how we could have a custom image for the background of the header. So we tabled that option to see what we could come up with.

We want to include the organization's tagline and a brand graphic rather than just the logo-on-the-left/widget-on-the-right set up. My colleague continued to futz with the CSS and we reworked the graphic until the layout for both desktop and mobile seem to be work well. (Though I haven't had time to compare what else he did under the hood!)

Really appreciate the help and relieved that we've got the site up purring along for the client. ---KSP

[jeremi_liwanag]

you may want to set a position relative into your #header and use position absolute to your widget ... use media queries to set a different background image to your header once you reached you breakpoint and top left or where ever you like to position your widget.

@media only screen (max-width:768px ) {
// header different background
// header widget different class
}

then 480 and 320 ...

---

Your online success is our business http://www.systemise.com.au

[Author]

Posts