Change logo height

Hello,
Add the following CSS.

.site-logo {
    max-height: 250px!important;
    width: auto;
}

Let me know if it helps.

• This reply was modified 7 years, 8 months ago by Poonam Namdev.

Hi Poonam,

Thanks for that. I tried it but it didn’t help much. I have realised that the problem is being caused by the width of the image I am trying to display, and that I am clearly going about this the wrong way.

My client wants their logo left justified above the menu, which in itself is not a problem. The problem is that they also want their contact info right justified above the menu (in line with the logo). I thought I could accomplish this by creating an image with that layout, but that is obviously the wrong approach, especially for a responsive theme, so I am not certain how to accomplish this requirement. I have certainly found the way to =not= do it ??

Thanks again for your help.
Tim

Hi @trtoles!

A CSS based solution similar to what @poonam9 suggested should work – as long as the image you’ve uploaded is larger than 125px in height.

I’d skip the use of !important though, since it shouldn’t be necessary:

.site-logo {
	max-height: none;
}

That removes the CSS max-height, so the image can be displayed at anything up the the theme’s max logo height of 300px.

Try to avoid using !important in CSS whenever possible – it’s usually not needed (like here) and it can make it more difficult to troubleshoot your CSS down the road, since !important acts as an override. Generally it’s best to write more specific CSS if you need to, rather than rely on !important to force the code to work.

If a 300px tall logo still isn’t big enough, you’ll need to change the theme’s logo handling.

To do so, start by setting up a child theme.

In your child theme’s functions.php file, paste the following:

function custom_logo_size() {
    remove_image_size( 'apostrophe-logo' ); // Remove the theme's setting
    add_image_size( 'apostrophe-logo', 9999, 300 ); // Add our own! This will resize based on height!
}
add_action( 'after_setup_theme', 'custom_logo_size', 12 );

That removes the theme’s registered sizing for the logo and replaces it with your own. The 9999 is the width (so basically unlimited width) and the 300 is the height. Adjust that second number as needed ??

With the image declaration changed, and the CSS altered, you should have full control over the size of the logo.

If you change the logo size using that second snippet, you’ll want to re-upload your logo. The resizing happens when you first upload the file, and changing the code won’t impact existing image files.

My client wants their logo left justified above the menu, which in itself is not a problem. The problem is that they also want their contact info right justified above the menu (in line with the logo).

I’d go the child theme route for this part as well ??

In your child theme folder, make a copy of the parent theme’s header.php file.

Then you can add the contact info into the HTML. Just after the .site-branding element, you can add a block like this:

<div class="header-contact-info">
	Name <br>
	Address <br>
	Phone <br>
</div>

(Obviously, using the correct contact info). Then you can style it with some CSS to get it positioned properly:

.header-contact-info {
    text-align: center;
    width: 30%;
    margin: 0 auto
}

@media screen and ( min-width: 768px ) {
    .site-branding {
        width: 70%;
        float: left;
    }

    .header-contact-info {
        float: right;
        text-align: left;
        margin: 0;
    }
}

The only drawback is if your client needs to update this info, they’d be doing it in the child theme code.