Genesis 2.0.1 Framework – Responsive Header?

[lggerhard]

I just purchased Genesis Framework, so it is a really new version. I created a logo image and was able to have it load to the home page instead of text. But when I look at it on a mobile device, it truncates the logo. I have seen a lot of conflicting posts about having the logo be responsive, but have been unable to make the logo display a smaller version on a phone. Is there a way to do this?

http://www.cindypavell.com/blog/

[Stefsull]

This reply has been marked as private.

[Stefsull]

And I have NO idea how my post turned turquoise... so there ya go!

[lggerhard]

Stefsull, thank you so much! Brilliant! Works like a champ!

[ali50n]

Hi, can you please let me know what the answer is as Stefsull's reply is marked as private.

Thanks
Alison

[Susan]

Alison:

Here is what was in the reply (I'm not sure why it was marked as private:

The best way to do it with a logo as wide as yours is probably to add the background-size property to the selector:

.header-image .title-area {
  background: url(http://www.cindypavell.com/blog/wp-content/uploads/2014/02/logo.png) no-repeat;
  max-height: 125px; /* I changed this to max-height */
  background-size: contain; /* this lets the image scale smaller as the viewport is more narrow */
}

You also need to remove the image that talks about Genesis from this selector:

`.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left; /* This genesis image shows at certain widths */
padding: 0;
}'

[officethug]

Susan -

I used your solution on my site but It's not working quite right. The header image is responsive but the space around it does not scale. If you look at the site I'm working on and resize the browser you'll see the blank space below the logo before the menu:
http://officethug.com/eggs/

Do you know how to fix this?

Thank you!

[Susan]

@officethug - it wasn't my solution - the original solution was provided as a private reply. I just repeated what was written in the private reply.

[lggerhard]

Hi officethug,

I have the same problem. The header image is responsive, but the space under the logo is quite significant, especially on an iPhone when the logo gets really small. I gave up on trying to get this smaller.

http://www.cindypavell.com/blog/

sorry!

Laura

[Author]

Posts