Add site logo to left of title/slogan

[Kemp-J]

I want to add a site logo to the left of the title and slogan (so that it uses approximately the same height as those two lines). Unfortunately the CSS involved in rendering the title and slogan is a little beyond me.

Is there an existing example for implementing this? Alternatively, could someone give me some idea as to how to accomplish it?

[Pinaute]

Hi @Kemp-J Here's how I accomplish it (in this case, the site logo is only to the left of the title):

Edit the file header.html Replace the following code block.

{{ if ( ne .Site.Title "" ) }}
<a href="{{ .Site.BaseURL | relLangURL }}"> {{ .Site.Title }} </a>
{{ end }}</div>

by this one:

{{ if ( ne .Site.Title "" ) }}
<a href="{{ .Site.BaseURL | relLangURL }}"><img class="logo-header" src="/img/main/my-logo.png"> {{ .Site.Title }} </a>
{{ end }}</div>

Finally, edit the file custom.css

.logo-header {
height: 20px;
}

[Kemp-J]

Thanks, that's a fairly straightforward way to get one there. I was hoping for a solution for the logo to be to the left of the title and slogan though, so it can be taller than just the one line. It seems very hard to do with how things are currently laid out though.