Genesis Sample Theme: How to use larger logo than the suggested size?

[ioutshine]

In this article (http://my.studiopress.com/setup/genesis-sample-theme/customize-your-settings/header-image/) it says to use a logo that is 600x160 which will then display as 300x80.

On phones and tablet devices... this is perfectly fine for me and I'm happy with how everything looks.

However, on everything else (laptops and desktops), that size looks too small for what my logo happens to be.

So, my question is, how can I display a larger logo on bigger screens like laptops/desktops, but still keep everything displaying like it currently is on smaller screens like phones/tablets?

Thanks in advance for any help.

[Brad Dalton]

Link to a live site please.

---

Tutorials for StudioPress Themes.

[ioutshine]

Here ya go: http://jaredadams.com/awr2.0/

Thanks.

[ioutshine]

Basically, on larger screens I'd like to show a logo that is about 400x80. On smaller screens (when the responsive Menu appears in place of navigation links) I'd like to show a logo that is about 300x60.

[Brad Dalton]

This tutorial will show you how to change the header image size. Basically, yiou match the width and height values in the CSS & PHP code to your image.

However, you will need to modify the CSS for Media Queries to change the size of your logo on different sized screens.

or

Load 2 different sized images.

---

Tutorials for StudioPress Themes.

[ioutshine]

Thanks Brad! I got it 99% figured out and working. There's just one thing I can't seem to figure out how to do.

On screens larger than 1200px, it looks perfect. The normal nav links appear to the right of the logo.

On screens 1023px or smaller, it looks perfect. The Menu link appears centered below the logo.

But, everything between 1023px-1200px has a problem... as the nav links appearing to the right no longer neatly fit on one line and the last link falls to a second line thus making things look ugly.

Since I feel like this resolution range is still too large for the Menu link to appear, I'd like to keep the normal nav links intact. However, instead of appearing to the right of the logo (where they don't fit at this resolution), I'd like to place them centered below the logo.

Would something like this be possible?

Thanks again for your help thus far. It's been extremely helpful.

[Brad Dalton]

Yes, center the nav

@media only screen and (max-width: 1023px) {
Your CSS Rule
}

---

Tutorials for StudioPress Themes.

[ioutshine]

Thanks, I figured that was it. But I've been playing around with the css for a while and I can't seem to figure out the specific "Your CSS Rule" part that's needed for making this work. Can you please point me in the right direction?

Thanks again.

[Brad Dalton]

Try this CSS

---

Tutorials for StudioPress Themes.

[ioutshine]

Just added that to the css on the live test version, but it didn't seem to do anything as far as I can tell?

[Brad Dalton]

Looks like you have a few problems there.

1. This CSS will center the header right widget at 1200px

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

.site-header .widget-area {
		width: 100%;
		float: none;
		text-align: center;
	}

}

2. Then you'll need to center your logo.

3. You'll then need to modify line 2160 in your Media Queries to this:

.content {
		width: 620px;
	}

---

Tutorials for StudioPress Themes.

[Author]

Posts