Responsive Header for Metro (no plug-in)

[Doug]

Hello and happy fourth!

For my site, http://cbhmboston.com, I am trying to get the header to be responsive without having to use yet another plug-in.

I am using http://responsinator.com to help me; but, I can't figure out how to get the logo to center responsively.

Could anyone help me? I would deeply appreciate it.

Here's the css for an iPhone 5 portrait (which is not working):

#header {
background: url("http://cbhmboston.com/wp-content/uploads/2013/07/CBHM_LogoWeb_480px2.gif") no-repeat transparent;
}
#header {
max-width: 90%;
}
#header {
min-height: 215px;
overflow: hidden;
}

Thank you!!!
Doug, Pro Plus Member

http://cbhmboston.com

[dev]

You say you don't want to use a plugin. I understand and validate that assertion... we often don't know where the code comes from and if it has been vetted for malware. That's why I only use plugins from trusted sources like SP and other vendors who have a long history in the WP community (i.e. like Contact Form 7, NextGen Gallery, etc.)

Before you embark on a mission to find the code you are looking for, at least try Nick's Genesis Responsive Header plugin. He is a 'trusted source.'

Genesis Responsive Header Customizer Update

If you don't like it or if it does not work for you, then go forward... but try it first.

NewMedia Website Design

[Doug]

Thank you, dev

I didn't want to say this; but, I've tried Nick's plugin twice and could not get it to work for me either time.

Thank you anyway,
Doug

[John]

Doug, here's a better way: How to replace the StudioPress background header image with a real image logo

John

---

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

[Doug]

John,

Thank you, kindly. I will try that and get back to you.

My complaint with StudioPress responsive demo themes is that they are responsive only when using the Title Area (text); but, not at all when it comes time to want to use an actual logo.

I agree with you completely.

Namasté,
Doug

[John]

Doug,

Looking forward to hearing how it works for you.

John

---

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

[Doug]

This reply has been marked as private.

[Doug]

Hi, John

The FTP issue has been resolved...and...

It works! (Mostly, it's getting clipped on portrait devices: http://responsinator.com/?url=cbhmboston.com

Can you advise how to get the logo to fit perfectly, John. Thank you for all your help!!! 🙂

Namasté,
Doug

[John]

Hi Doug,

Glad to hear you made it this far! For the responsiveness on your site, I'd comment out line 566 - the float:left is what's holding you back.

John

---

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

[John]

Actually it's going to take more than that, now that I look at it. You'll need to go through your media queries and fine-tune what happens at the different widths.

For starters, the padding on the main #wrap div is creating the horizontal scroll bars, so I'd set that to zero (0) starting at 600px.

You could also resize your logo for different queries, since it seems to dominate the screen on the smaller devices.

---

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

[Doug]

John,

You are a good person; and, I thank you immensely for all your help. If I could give virtual gold stars, you would get two!

I will implement and get back to you again.

Peace to you in the Black Hills,
Doug

[rick4him]

@Doug, I'm trying to do the exact same thing on my site. I like how you got your logo working (and looking) on your site. Did you use this method? I tried to use the responsive header plug in, but had a hard time getting it to work. Looking to do this without a plug in.

[Doug]

Hi, Rick

Apologies for not being online for a while.

Yes, I used this method; what is your site url?

Peace,
Doug

[tsoraci]

@doug do you mind if I hop in this thread as well? I'm having a weird responsive issue with my News theme. Not only does my header text not center like the demo's, but I also have this weird gap on the right:
My site is androidassault.com, thanks for any feedback.

[Author]

Posts