adding logos to the menu bar

[SamaRez]

Hi all,

any idea how it is possible to add logos on the left and right of the menu bar?

[Bear-kai]

Related but not exactly what you want:

main_menu:
  enable: true         # Display the navigation bar?
  show_logo: true      # Display your site title or `assets/media/logo*` image in the nav bar?

[SamaRez]

Hi, thanks for the message. This setting only allow you to have a title or logo, however, I want to have both.

[chrede88]

An easy way to add a logo along with the title in the top left corner of the navbar, is to add the title to the logo file. It's a bit of a hack, but it gets the job done. The navbar is 70px tall, so keep that in mind when/if you decide to try this approach.

Alternatively, you'll have to edit the navbar.html file. The bit that controls the title and logo are from lines 19-29. Replace line 23 that with this:

<div class='row align-items-center'>
  <div class='col'>
    <img src="{{ $logo.RelPermalink }}" alt="{{ site.Title }}">
  </div>
  <div class='col'>
    {{- site.Title -}}
  </div>
</div>

If you also want both logo and title to show up when viewing the site through a mobile browser (small screen), then you also have to replace line 42 with the same content as above.

Here are some screenshots of the result:

Regarding adding a logo to the right side, you can use the menu.toml config file for that. Add this to the file:

[[menu_right]]
pre = "<img src='somelogo.png' alt='someAlt'>"
weight = 1

And place a logo file in ./static/somelogo.png. Again, you'll have to resize it correctly.

[SamaRez]

Great! Thanks!

[s-aLman]

I am facing the same issue. I just want to add a new logo image in the navbar but its not appearing. And I wonder why I don't see any navbar.html file in my code base.