Metro-Pro Header Responsiveness

[Besearched]

We've been working on another site and trying to get the header to be responsive on mobile...and it's not working out at all. We thought this theme (Metro-Pro) was supposed to be mobile responsive. When the header loads on a mobile device, the entire center section of the header becomes non-existant .... OR .... the header image that was placed there via the dashboard option to use a header image gets reduced to an incredibly small size. Please look at the url provided and advise.

http://besearched.biz/abbamovers/

[emasai]

You will need to split your header image into 2 different parts for the mobile responsive so that it does not get squished very small.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Besearched]

Ok, that sounds like a reasonable solution. However, that is something I've never had to try to do before. Do I bypass the dashboard Appearance panel for the header altogether? I have to assume this is done through the CSS, can you please provide a little more of a clue?

Thank you!

[emasai]

I always bypass the Appearance panel and do it directly in the css, more control that way. You can make 2 separate images for the header area, one of them will be in the title area, the other can be a background image in the header or use a second text widget in the header. You will have to adjust the width of the title area which is too large at the moment.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[John]

http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[jenniferh]

Hi John,

http://www.darringforjudge.com/

I used your tutorial on replacing the background header image with a real image logo and it's working responsively very well (thank you very much)! Although, the header at full screen view is much smaller than it should be (should be 1080 px, full width).

It seems to be conflicting with the #header .widget-area where we have the "contribute" button. I tried adjusting the width of that class to be able to enlarge the header some, but it's connected to the sidebar which I don't want to modify.

Any suggestions on how to retain my full width header, and the header widget image, and the responsiveness!?

Much appreciated,
Jennifer

[John]

Hi Jennifer,

After taking a quick look at your site I think the approach I would take is to separate "Anne B. Darring" and the two large green stars from the rest of the header image and make that the logo. Then set her photo and the tagline as the background image of the header. That should allow you to also have the contribute button in the header.

You'd have to adjust the CSS at your different media breakpoints so that the three elements would play well together, but that's what I would do.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[jenniferh]

Ah, I see what you mean. I'll give that a try, thanks!

Jennifer

[Author]

Posts