support an image logo instead of title in the navbar

root · root · commit 85d8c7f2a227 · 2016-12-25T18:17:33.000Z
diff --git a/README.md b/README.md
@@ -166,12 +166,18 @@ Change these values to match the pages on your site. Each menu item is composed
 
 #### Displaying an image in the navigation bar
 
-You can add an image to the navigation bar by defining the `avatar` parameter in `_config.yml`. The image should be a square (width = height).
+You can add an image to the middle of the navigation bar by defining the `avatar` parameter in `_config.yml`. The image should be a square (width = height). This image will disappear once the user scrolls down in the page.
 
 ```yaml
 avatar: "/path/to/image.png"
 ```
 
+You can also place an image in the top-left corner of the navigation bar instead of your website's title. This is done with the `title-img` parameter in `_config.yml`:
+
+```yaml
+title-img: "/path/to/image.png"
+```
+
 ### Add your name/email/social media links to the footer
 
 You can add contact information and social media links in the footer. They will be displayed as nice little logos, to give the footer a clean feel. Add the following to your `_config.yml` file:
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -7,7 +7,11 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
+      {% if site.title-img %}
+        <a class="navbar-brand navbar-brand-logo" href="{{ site.url }}"><img src="{{ site.title-img }}"/></a>
+      {% else %}
+        <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
+      {% endif %}
     </div>
 
     <div class="collapse navbar-collapse" id="main-navbar">
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -121,6 +121,25 @@ img {
   color: #0085a1;
 }
 
+.navbar-custom .navbar-brand-logo {
+  padding-top: 0;
+  -webkit-transition: padding .5s ease-in-out;
+  -moz-transition: padding .5s ease-in-out;
+  transition: padding .5s ease-in-out; 
+}
+.navbar-custom .navbar-brand-logo img {
+  height: 50px;
+  -webkit-transition: height .5s ease-in-out;
+  -moz-transition: height .5s ease-in-out;
+  transition: height .5s ease-in-out;
+}
+.navbar-custom.top-nav-short .navbar-brand-logo {
+  padding-top: 5px;
+}
+.navbar-custom.top-nav-short .navbar-brand-logo img {
+  height: 40px;
+}
+
 @media only screen and (min-width: 768px) {
   .navbar-custom {
     padding: 20px 0;
@@ -625,4 +644,4 @@ td.gutter {
 
 #social-share-section {
   margin-bottom: 30px;
-}
+}
