Responsive Header

[Loudness]

I"m currently using the WordPress default "Header image" uploader. The header height was modified in the php file to accomodate the image i did.

Now I want to get a fully responsive header (There's a lot of stuff in that header... logo, tagline, 3 button, image, etc). How can I do that using genesis ? I"m able to code the css (not a problem) with media query, but what are the step required to :

1. Use a custom header (I guess we have to change function.php ?)
2. Header height will be different on each media query size, how can I adjust that in the php file ? Basically I would like the header height controlled by the CSS.

So basically, do I have to create a new "responsive-div-header", hook it to the top to replace the current header & then code in the child theme css file ?

[chantal2012]

I'm interested in finding this out as well

[Susan]

Try this tutorial:

http://blackhillswebworks.com

[Loudness]

Hi, sorry for the late reply. Thanks for the link Susan, however I'm looking for a much more than juste a logo.... here's what I want in the header :

http://img202.imageshack.us/img202/4212/5e41.jpg

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

Where Can I structure all the elements ? Image/icons/text, etc ?

[Loudness]

Thank you for the link Susan, however I'm looking for much more than just a logo in the header... Here's what I want to do :

http://img202.imageshack.us/img202/4212/5e41.jpg

Where does all the html/css of this header go ?

[John]

Do you have a link to the actual site you're working on?

---

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

[emasai]

@Loudness and Chantal2012, I think this might be what you are looking for
http://wpsites.net/web-design/responsive-inline-header-widgets-side-by-side-in-studiopress-themes/

---

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

[Loudness]

No link, the site is local right now

Would it be possible to add 1 big widget that covers the full header size & then custom code right in the widget window ? (using html & div's ?)

[John]

When I have other things in my header besides the logo, I add those with text and/or other widgets and make adjustments with CSS. But I still use the logo method as described in the tutorial that Susan mentioned to properly add a logo to the header area.

---

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

[Author]

Posts