Hi there!
I’m seeing your logo sized to be 300x96px and that’s what’s displaying on the site. Should it be doing something else?
The code Kathryn provided in the post you found will change the size in a Child Theme for you… maybe the width and/or height need to be adjusted there?
Hi Sarah,
I just discovered that the logo in my Media Library was originally sized 2356x754px! I actually resized it to a preferred 449x144px, and replaced the image in the Media Library.
What I’ve also done is added
.site-logo { max-width: 449px; }
into my child theme’s css.
A function in my child’s function.php file has also been edited:
function sketch_child_featured() {
add_image_size( 'sketch-featured', '449', '144' );
}
add_action( 'after_setup_theme', 'sketch_child_featured', 11 );
Somehow the logo is still scaling down to 300px wide in the header.
449x199px scales down proportionally to 300x96px when the image is set to 300px wide, so something is going on there to adjust it. Hmm.
Have you tried adding CSS (to your child theme/CSS editor) for max-height to the site logo to see if that helps?
I found this in Sketch’s CSS that may be involved (depending on the screen size where you’re looking at it from):
@media screen and (min-width: 1281px) {
.site-logo { max-height: 100px; }
Maybe the 96px on the current logo display is coming from max-height being 100 and the theme trying to adjust the logo proportionally (and therefore ending up at 300×96)?
Yay! I found a solution that works, although it’s probably rather unconventional in using a CMS.
I copied Sketch’s header.php into my child theme. After that, I commented out the reference to Jetpack Site Logo,
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
and hard-coded in the reference to the image from my Media Library. I also gave the image a class of site-logo.:
With Jetpack’s Site Logo feature, it is very frustrating to edit one’s CSS, and the changes not logically take effect. I’m just going to remove that Jetpack feature so that I can modify my logo the way I want. What I’ve also discovered was that my logo element was affected by Jetpack’s Photon, described here: https://jetpack.com/support/photon/. There is an image_downsize filter that was most likely affecting how that logo displayed. I have ticked that feature “off” in my WordPress dashboard.
I also deleted the logo that was uploaded in the Customizr, since I won’t be using that means to display the graphic in my header.
The graphic is finally at a place where I can easily resize it as I want. As of the time of this post, I’m currently adding media queries at particular breaking points for the graphic and the accompanying navigation.
Great! Thanks for sharing your solution! 🙂
