Show the version selector at smaller screen widths (#541)

Fixes #458

Author: jamiemccue

static/header.less

@@ -35,6 +35,7 @@
         width: 60px;
         height: @brand-height;
         cursor: pointer;
+        margin: 0 @gutter 0 0;
         &:hover > a {
             opacity: .7;
         }
@@ -53,78 +54,76 @@
     }
 }
 
-// ----- CANJS LOGO AND VERSION DESKTOP -----
-@media screen and (min-width: @breakpoint) {
-    .brand {
-        .dropdown {
-            position: absolute;
-            top: 52px;
-            background-color: white;
-            border: 1px solid #ccc;
-            box-shadow: 0 6px 12px rgba(0,0,0,.175);
-        }
+// ----- DROPDOWNS -----
 
-        .logo {
-            margin: 0 @gutter 0 0;
+.brand {
+    .dropdown {
+        position: absolute;
+        top: 52px;
+        background-color: white;
+        border: 1px solid #ccc;
+        box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    }
 
-            &:hover .dropdown {
-                display: block;
-            }
-            .project-dropdown {
-                left: 20px;
-                width: 180px;
-            }
-            .project-dropdown a {
-                color: black;
-                font-size: 14px;
-                padding: 12px 16px;
-                text-decoration: none;
-                display: block;
-                &:hover {
-                    background-color: @light-gray-color;
-                }
-            }
+    .logo {
+        margin: 0 @gutter 0 0;
+        &:hover .dropdown {
+            display: block;
         }
-        .version {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            height: @brand-height;
-            padding-top: 7px;
-            cursor: pointer;
-            .version-number::after {
-                display: inline-block;
-                width: 15px;
-                height: 15px;
-                vertical-align: bottom;
-                content: '';
-                background-image: url(img/down_black.svg);
-                background-size: cover;
-                background-repeat: no-repeat;
-            }
-            &:hover > a {
-                opacity: .7;
-            }
-            &:hover .dropdown {
-                display: block;
-            }
-            .version-dropdown {
-                left: 100px;
-                width: 100px;
+        .project-dropdown {
+            width: 180px;
+        }
+        .project-dropdown a {
+            color: black;
+            font-size: 14px;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+            &:hover {
+                background-color: @light-gray-color;
             }
-            .version-dropdown a {
-                color: black;
-                padding: 5px 10px;
-                text-decoration: none;
-                display: block;
-                &:hover {
-                    background-color: @light-gray-color;
-                }
+        }
+    }
+    .version {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        height: @brand-height;
+        padding-top: 7px;
+        cursor: pointer;
+        margin: 0 @gutter/3 0 0;
+        .version-number::after {
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            vertical-align: bottom;
+            content: '';
+            background-image: url(img/down_black.svg);
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+        &:hover > a {
+            opacity: .7;
+        }
+        &:hover .dropdown {
+            display: block;
+        }
+        .version-dropdown {
+            width: 100px;
+        }
+        .version-dropdown a {
+            color: black;
+            padding: 5px 10px;
+            text-decoration: none;
+            display: block;
+            &:hover {
+                background-color: @light-gray-color;
             }
         }
     }
 }
 
+
 // ----- CHAT, FORUM, GITHUB STAR, TWITTER -----
 .top-right-links {
     margin: 0 auto;