How do I add a image logo to the top nav bar in Jekyll?

Question

Just started using Jekyll to generate some basic pages and wanted to add a image logo to the top branding area on the navigation bar. Is there a standard way to do this without messing with the themes in Jekyll?

Answer 1

I don't believe it's possible to do this without at least a little customizing of the theme.

However, since you're using the default, twitter theme for Jekyll-Bootstrap, these changes should be fairly straightforward to make:

Put your logo.png in assets/themes/twitter

In your _includes/themes/twitter/default.html you'll want to add a <li> with your logo under the <ul class="nav"> element like so:

<li><a class="brand-image" href="{{ HOME_PATH }}"><img class="brand-image" src="{{ASSET_PATH}}/logo.png"/></a></li>

Next, define the brand-image class by editing assets/themes/twitter/css/style.css and add the following:

.navbar .nav > li > a.brand-image {
      padding: 4px 0px 0px 0px;
}
.navbar .nav > li > a > img.brand-image {
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;

}

You'll probably have to play with the padding to get it to work just right for your image.