How to Make Genesis Header Responsive?

[Cathy]

Hi,

I am using Genesis Sample Theme and I am wondering how do you make the header image responsive? I've created a dummy WordPress website here;

http://h133.direct.testsitewordpress.siterubix.com/

I have tried various codes gathered from Google Search and have no success after 4 hours.

This is the code that I am using right now;

.header-image .site-title > a {
background: url(http://testsitewordpress.siterubix.com/wp-content/uploads/2016/01/My-Logo-1025-X-154.png) no-repeat left;
float: left;
min-height: 154px;
width: 100%;

What's missing? I would appreciate any help. Thank you!

http://h133.direct.testsitewordpress.siterubix.com/

[Ginger]

Hi there,

Your image and width settings in your mobile CSS area is wider than the max-width allowed so it's not going to look right. I would follow this tutorial here:

http://thepixelista.com/responsive-genesis-child-theme-logo/

And change the width to 100% and have a different image referenced for each mobile break-point.

Hope that helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Cathy]

Hi Ginger,

My preexisting media queries are;

@media only screen and (max-width: 1200px)

@media only screen and (max-width: 960px)

@media only screen and (max-width: 800px)

Question - Do I still need to add/create other width like

@media only screen and (max-width: 1024px)

@media only screen and (max-width: 768px)

??

So I have created additional media queries and created separate width logos and change the height accordingly, for example;

@media only screen and (max-width: 480px)

.header-image .site-title > a {
background: url(http://testsitewordpress.siterubix.com/wp-content/uploads/2016/01/480x.png) no-repeat left;
float: left;
min-height: 135px;
width: 100%;

It's starting to look more responsive but doesn't fit very 'snugly' into 240x, 320x and 480x screen as shown here;

http://testsitewordpress.siterubix.com/

Is that normal?

Thank you so much for your help.

[Brad Dalton]

I would use the custom header function included in WordPress and supported by Genesis

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 1025,
	'height'          => 154,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

You'll still need to change the image dimensions in your CSS.

Also, if you do use CSS, i would add the image to your child themes images folder, not your WordPress Media Library.

More on this topic

---

Tutorials for StudioPress Themes.

[Cathy]

Hi Brad,

How do I write the code for media queiries under CSS? My theme comes with;

@media only screen and (max-width: 1200px)

@media only screen and (max-width: 960px)

@media only screen and (max-width: 800px)

Should the height and width differ for each?

Thanks.

[Brad Dalton]

I couldn't access your site but wanted to add another solution using PHP.

---

Tutorials for StudioPress Themes.

[Author]

Posts