How do I customize the dimensions of my header image?

[jillian]

I need help customizing my header support code so that I can enlarge my header image dimensions without cutting off other parts of the page, like my main navigation menu. I'm new to WordPress and CSS, so simple step-by-step instructions would be super helpful.

Thanks!

http://www.compassionatewomen.org

[Brad Dalton]

There's 2 files you need to edit.

The functions file for the custom header function

And under the Site Header section in your style sheet there's 1 or 2 instances of the header width and height you need to modify.

All dimensions should match your image size exactly.

---

Tutorials for StudioPress Themes & WooCommerce.

[jillian]

Where do I find the functions file?

This is what I see in my style sheet:

/* ## Title Area
--------------------------------------------- */

.title-area {
float: left;
padding: 10px 0;
width: 360px;
}

.header-full-width .title-area {
width: 100%;
}

.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}

.site-title a,
.site-title a:hover {
color: #333;
}

.header-image .site-title > a {
background: url(http://compassionatewomen.org/wp-content/uploads/2015/03/logoandtitle.png) no-repeat left;
float: left;
min-height: 60px;
width: 100%;
}

.site-description {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}

.site-description,
.site-title {
margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
display: block;
text-indent: -9999px;
}

Is this where I'll be making edits, and if so, what changes do I make? This is my child theme, btw. Thanks!

[Brad Dalton]

.title-area {
float: left;
padding: 10px 0;
    width: 360px;
}

Change the width and also find your functions file in your child theme.

Here's a video

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts