Publication Logo Resize

Developer help
1

Hello All

Very new to Ghost and looking for some help with regard to my Publication logo using Casper.

On first install the site-nav logo was far too small so I found a bit of code to inject to increase the size on the main landing page…

<style>
 .site-logo {
 	max-height: 200px;
 	}
    
 .site-nav-logo img {
    display: block;
    width: auto;
    height: auto;
    }
    
.site-nav-logo {
    flex-shrink: auto;
    display: block;
    margin-right: 24px;
    padding: 0px 0;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1em;
    font-weight: bold;
    letter-spacing: -0.5px;
	}
</style>

This worked however now its now to big when browser to other pages. (See Attached image).

How can I get this to auto resize to fit the upper bar?

Screenshot 2021-01-21 033309
Screenshot 2021-01-21 0333091166×593 27.8 KB

2

Welcome to Ghost, congrats on giving it a shot!

The height of the navigation bar is set in the site-nav style in the Casper theme. By default it is 64px

The spacing around the logo is set by the padding attribute of site-nav-left and site-nav-logo

Pasting this into the Site Header section of the Code injection should do the trick

<style>
.site-nav-left {
  padding: 0;
}
.site-nav-logo {
  padding: 0;
}
.site-nav-logo img {
  height: 64px;
}
</style>

The logo should now fit exactly in the navigation bar

Removing the padding of course ruins some of the other layout. You want to fix that

3

Pieter thank you kindly! It works perfectly!