Different publication logo for navigation bar

For the life of me I can’t figure this out and it’s quite strange Ghost hasn’t made this easier.

I am using the Caspar theme, and I have uploaded my publication logo under the Branding settings within Ghost (which it then displays in the middle of the page). However, it uses this same logo image for the navigation bar - however, the navigation bar is blue, same as the font color of the logo, so you can’t see the logo. I already have a white font version of my logo that I’d like to use for the nav bar, but there is no setting for me to add that image.

I tried changing the html (below) so that img src="…" links to a png file that I downloaded into the assets file of the package, but that didn’t do anything.

Any help would be greatly appreciated.

 <div class="gh-head-brand">
                <a class="gh-head-logo" href="{{@site.url}}">
                    {{#if @site.logo}}
                        <img src="{{@site.logo}}" alt="{{@site.title}}" />

Changing the src should work, could you share what you tried ?
It should be something like this:

<img src="{{asset 'images/yourimage.png'}}"  alt="{{@site.title}}" />

assumin yourimage.png is in assets/images/ directory.

1 Like

That works! Thank you Biron.

Though another issue - the png file size I have is quite large, so when I upload it it looks a little blurry on the website because it’s compressed and sized down to fit in navigation bar.

I do have a SVG file equivalent, but when I try the same it doesn’t show up at all. I read that it could be because SVG files I need to specify the height and width properties? Do you know what those should be for the Caspar theme / or good sizing for nav bar? Or is there some other issue?

If you have an SVG, then you could simply paste the SVG code instead of the element.
If you need to adjust the size, you should be able to do it with CSS from code injection.