Log in Sign up

Image as site title

Is there a way to replace the site title on the top left with an image, and still have it link to the landing page?

The site is lookingout.io

7 replies Asked Sep 13 '22 at 16:17 · Improve this question

I just checked your site and the image has been commented out. Do you want to replace the whole title with an image?

Answered Sep 14 '22 at 2:57 · Improve this answer

Yes, I would. Or at least have the option to test with an image.

Answered Sep 14 '22 at 4:34 · Improve this answer

You will want to fork an editable copy of your template, if you haven't done so already. Then open up the template editor and navigate to the file header.html under 'Source Code'. In that file, replace the contents of lines 3 through 5 with the following:

{{#avatar}}
<img class="avatar" src="{{avatar}}" alt="{{title}}"/>
{{/avatar}} 

Once you've done that, navigate to the photo settings page and upload a photo if you haven't done so already.

Does that work? Please let me know if you have any questions about this or anything else

Answered Sep 14 '22 at 10:56 · Improve this answer

Yes! This works perfectly well on desktop, thank you!

However, on mobile (iPhone 11), the text of Looking Out causes a line break that then occludes the title of the page.

The nav also runs off the right hand side of the screen, unless the phone is rotated to landscape mode.

Answered Sep 14 '22 at 11:33 · Improve this answer

Try adding the following style to #logo:

flex-shrink: 0

Does that help?

Answered Sep 21 '22 at 13:31 · Improve this answer

Yes, it absolutely does.

The nav is still running off the side of the screen.

Is there a CSS fix for that, too?

Answered Sep 22 '22 at 10:30 · Improve this answer

What do you want to happen on smaller screens? The links to wrap onto a new line? If so, you'll need to look into flex-wrap

Answered Sep 22 '22 at 10:56 · Improve this answer

Markdown allowed