#35 Update Logo in Navigatin Bar

Author: Yuma Soga

app/assets/stylesheets/bootstrap-creative/_navbar.scss

@@ -6,10 +6,10 @@
   @include sans-serif-font;
   @include transition-all;
   .navbar-brand {
-    font-weight: 700;
-    text-transform: uppercase;
-    color: $primary;
-    @include sans-serif-font;
+    background: image-url('coderdojo-konan-header-logo.png') no-repeat left center;;
+    background-size: contain;
+    height: 50px;
+    width: 200px;
     &:focus,
     &:hover {
       color: darken($primary, .1);
@@ -38,9 +38,11 @@
   }
   @media (min-width: 992px) {
     border-color: transparent;
-    background-color: transparent;
+    background: rgba(0,0,0,0.3);
     .navbar-brand {
       color: fade-out($white, .3);
+      height: 60px;
+      width: 350px;
       &:focus,
       &:hover {
         color: $white;

app/views/staticpages/index.html.haml

@@ -1,7 +1,7 @@
 / Navigation
 %nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
-  .container
-    %a.navbar-brand.js-scroll-trigger{:href => "#page-top"} Start Bootstrap
+  .container-fluid
+    %a.navbar-brand.js-scroll-trigger{:href => "#page-top"}
     %button.navbar-toggler.navbar-toggler-right{"aria-controls" => "navbarResponsive", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarResponsive", "data-toggle" => "collapse", :type => "button"}
       %span.navbar-toggler-icon
     #navbarResponsive.collapse.navbar-collapse