Enlarge site logo in Monochrome Pro

[frankie]

Hi
Does anyone know how to enlarge the site header logo dimensions please? I made my logo the default size (320 x 120 px) but it displays much smaller than that so I assume some default coding is in action here to restrict the size?
Thanks

http://www.totnestennis.co.uk/

[Brad Dalton]

Hi

Generally, there's 2 steps :

1. Modify the PHP code for the custom header in your child themes functions file.

2. Modify the height values under the Site Header section in your style.css file.

---

Tutorials for StudioPress Themes & WooCommerce.

[Avishekks]

Hi I have the same question. I am very new to editing files and such.

Anyway, using firebug, I found that my site's header is contained here:

<div class="site-container" style="margin-bottom: 93px;">
<ul class="genesis-skip-link">
<header class="site-header" itemscope="" itemtype="https://schema.org/WPHeader">
<div class="wrap">
</header>
<div class="site-inner">
</div>

So I went to my styles.css but didn't find this area anywhere, so I'm not sure how to make my header image bigger.

If it's possible, I'd even like to simply add the logo, and then text next to it...any advice much appreciated.

[Avishekks]

I edited the functions.php file but still the image hasn't increased in size. I increased it in the file to 480px in width, keeping the height the same at 120.

I uploaded a 4800 x 1200px image, and it looks smaller than before when I uploaded a 3200 x 1200 px image. Is the problem in my styles sheet? Here's what I have under .header-image.

}

.header-image .title-area {
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 0;
width: 133px;
}

[frankie]

Hi
Yes I found this very tricky to resolve - on other StudioPress themes I have found editing the logo size fairly simple but this theme seems different. I cannot quite remember how I sorted this out but it was not perfect. In the css code you have shown try increasing the height: to the height you require.

Here is my code:
.header-image .title-area {
height: 94px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
padding: 0;
width: 230px;
}

Which seems to have worked.

[Avishekks]

Thanks. I figured this was the area to edit. I changed the width to 480px and it solved the issue! Thanks.

The problem is, I'd still like the image to be larger so back to more edits.

[Author]

Posts