Change Logo Size

The default size limit on the logo in Sketch is 100px high.

To override that, try adding this to your custom CSS, adjusting the value as needed:

.site-logo {
    max-height: 300px;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Hi again ??

Thanks for the above code. I was able to increase the size of my logo and it’s looking much better.

Question: Is it possible to reduce the padding above and below the log? Since it’s much more horizontal than square, it looks like there’s a bunch of extra white space above and below.

https://nanoanno.com/

Thanks!

Hi nanoanno – this custom CSS should do the trick:

.site-branding {
     margin-bottom: 0;
}
.has-site-logo .site {
    padding-top: 0;
}

Let me know how it goes.

That worked!

Thank you so much ??

Actually… one other question, along the lines of adjusting the logo.

Is it possible to drop the menu options down just a bit?

I’m thinking either centered with the logo (centered top to bottom, that is) or just above the hr?

With the logo in place, it looks as though the menu options are now floating in the air ??

Ann

Hi Ann, what about something like this to push it down about halfway:

.has-site-logo .main-navigation {
    padding-top: 50px;
}

I have not checked at all screen sizes so you might want to spot-check on a few different mobile devices or screen sizes to make sure that positioning change doesn’t have any unintended consequences on smaller screens.

I bumped it up to 80px and that worked like a charm. On mobile, it sits right above the hr, so it looks great.

Thank you!

Great, glad you’re all set with this! I’ll mark this thread as resolved.