Resize Header–Author Pro

[miam]

I'm having a lot of trouble resizing my header in Author Pro. I feel like this should be the easiest change possible, yet I can't seem to figure it out.

First, there seems to be a limit to how far I can adjust the width. Around 450px or so, it stops increasing, no matter how large the original image size. I'm not certain how large I want the header to be, because I haven't been able to see how it looks at different sizes, but I'd guess somewhere between 500-600px.

Second, increasing the width just to 400px or so causes all kinds of problems with the nav menu. It looks terrible on smaller screens, with far too much white space when the page is scrolled fully up. Also, the nav menu cuts off the top of the page content. I've tried adjusting the margin of the nav-menu, but that just causes the menu to overlap the header at small sizes.

I'm working on a private staging site, so I'd rather not post the password publicly. Even just pointing me toward the code I need to look at would be a big help.

Help?

[Marcy]

There are two files that have the title area size.

In style.css, find:

.header-image .title-area {
	padding: 25px 0;
	width: 320px;
}

and

.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	float: left;
	min-height: 70px;
	width: 100%;
}

and in functions.php, find:

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

You would need to change the widths and heights in these to match your logo.

The menu area will decrease as you increase the title-area though. And you will need to make adjustments to the CSS for smaller screen sizes. There isn't really any way to help you more without seeing the site.

If you can keep the logo to 320px wide, the theme will look it's best.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts