Changing Banner Size on Alto Theme

Themes
1

Hello! I am trying to revamp my blog with a new title, logo, etc., and I’m running into a problem. All of the variations of the logo I want to use get scrunched down really tiny by the Alto theme, which seemed to only want very wide but short images for the banner.

I love the theme otherwise, but I’d really just love to be able to thicken that top banner so that my banner is more legible & visible. Is this possible? If not, I’ll probably just have to look and see if any other themes would work.

2

Are you able to share a link to your work in progress?

You’re right that the logo size expected is a rectangular aspect ratio. With Alto, in particular, there is a max height on the logo of 40 px to keep it proportional to the other text in the navbar.

3

Is there no way to change the banner text size, so that I can add an image taller than 40px?

4

You can change the text and/or logo size with code injection. Ryan asked for a link because it’s easier to help if we can see the site! :)

5

Oh that makes sense! The current domain is bearseesbirds.com ! I’m not great with code stuff but if someone is able to give me step by step directions I can probably get it done haha

6

I have a tutorial about figuring out selectors here:

But let’s see if we can figure this one out.

I hit right click on that logo and chose ‘inspect’ (my latest version of chrome makes me scroll to see inspect… annoying!)

image
image1855×873 156 KB

(Sometimes you might find that you’ve inspected the parent of the element that needs to be adjusted. You can click around on that HTML on the right until you find it.)

Ahha. See that max-height? That’s the problem.
I’m going to edit it right in the lower box on the browser. Let’s try 80px.

image
image1552×503 67.8 KB

When you figure out what value you like, then it’s time to open code injection. (/ghost > Settings (the gear icon on the dashboard) > Code Injection > Header)
Put the new style between style tags, like this:

<style>
.gh-head-logo img {
    max-height: 80px;
}
</style>

Be sure to hit save.

1 Like
7

That worked perfectly, thank you! I appreciate you taking the time to walk me through that.

2 Likes