Restore colour-changing logo

7088c6d removed the colour-changing logo breaking JavaScript that set colour on loading.

Restore the class name back to restore the feature.

Also fixes #564.

_includes/nav.html

@@ -3,9 +3,9 @@
   <div class="row">
     <div class="container">
       <nav class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between     pb-0  pt-0">
-        <a class="navbar-brand" href="{{ site.baseurl }}/">
-          <img src="{{ site.baseurl }}/assets/logoOpt.png" alt="Sugar Labs logo" height="90" width="270">
-        </a>
+        <div class="logo1" id="navLogo">
+          <a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
+        </div>
 	<div>
 	  {% include banner.html %}
 	</div>
@@ -99,9 +99,9 @@
 <!-- Header for screens with width <= 1215px -->
 <div class="sticky-top bg-white container-fluid flex-fill w-100" id="secondHeader">
   <nav class="navbar navbar-expand-lg navbar-light">
-    <a class="navbar-brand" href="{{ site.baseurl }}/">
-      <img src="{{ site.baseurl }}/assets/logoOpt.png" alt="Sugar Labs logo" height="80" width="240">
-    </a>
+    <div class="logo2">
+      <a href="{{ site.baseurl }}/">{% include logo.svg %}</a> 
+    </div>
     <button
       class="navbar-toggler"
       type="button"

css/custom.css

@@ -15,3 +15,8 @@
 .intro_img>.container>div>div>div>p {
   padding: 0 10px;
 }
+
+/*This is for navLogo of navbar */
+#navLogo {
+  margin-top: 6px;
+}