OT: Adding a logo in my blog header


I am trying to add a logo in my blog header. I am using the ezhil theme GitHub - vividvilla/ezhil: Clean and minimal personal blog theme for Hugo.

In the head.html:

<div class="header">
	<base href="{{ .Site.BaseURL }}">
	<h1 class="site-title">
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
	<div class="site-description">
		{{- if isset .Site.Params "subtitle" -}}
		<h2>{{ .Site.Params.Subtitle | markdownify }}</h2>
		{{- end -}}
		<nav class="nav social">
			<ul class="flat">
				{{- range $index, $key := .Site.Params.Social -}}
				<a href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>
				{{- end -}}

	<nav class="nav">
		<ul class="flat">
			{{ range .Site.Menus.main }}
				<a href="{{ .URL }}">{{ .Name }}</a>
			{{ end }}

But I don’t know where to add this line:

<img style="position: left; " src="{{ "images/logo.png" | absURL }}" width="50" height="50" >

Wherever I add this line the logo appears above the blog title. I wish to add it just before the blog title, on the same line.

How can I do that?

thank you.

This is a CSS question and not really a Hugo question.

Please try asking at the theme repo issues tracker.

Or try searching for ways to display HTML elements side by side with CSS in Stackoverflow, W3Schools and similar sites.

1 Like