Minimal-mistakes: Adding a logo to the masthead

Created on 16 Dec 2017 · 4Comments · Source: mmistakes/minimal-mistakes

I'd like to add a logo in the top left corner of the screen, left from the website's title.
I foolishly tried to add an tag in masthead.html, where I also defined my static website title. It somehow worked, but the image was above the title and I guess this would also lead to problems with the "responsiveness".

What's the best way to add a logo to the masthead?
Thanks!

Stale Support

Source

wAuner

Most helpful comment

By editing _includes/masthead.html

Just by replacing the {{ site.title }} text with an image it works pretty well.

<div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="{{ '/' | absolute_url }}"><img src="your-masthead-image.jpg"></a>
       ...

Which looks something like this:

screen shot 2017-12-16 at 11 43 56 am

mmistakes on 16 Dec 2017

👍3

All 4 comments

By editing _includes/masthead.html

Just by replacing the {{ site.title }} text with an image it works pretty well.

<div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="{{ '/' | absolute_url }}"><img src="your-masthead-image.jpg"></a>
       ...

Which looks something like this:

screen shot 2017-12-16 at 11 43 56 am

mmistakes on 16 Dec 2017

👍3

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

stale[bot] on 15 Jan 2018

I have followed the steps and it has worked for my homepage (splash layout). However, I get a "corrupted image" icon for any other page/post. Has anybody run to the same issue?

screen shot 2018-01-28 at 9 09 35 pm

dnllvrvz on 29 Jan 2018

The image path is incorrect, that's why it's broken. You can verify this by opening your web browser's development tools.

More than likely the console will tell you it can't find the image asset. Make sure the path is correct. You'll probably want to use Jekyll's relative_url filter on the image as well.

Look at the various includes and layouts in the theme to see how I've handled asset paths.

mmistakes on 29 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings